Bagaimana cara menambahkan font khusus di WordPress
Apakah Anda ingin menambahkan font WordPress khusus? Font khusus memungkinkan Anda untuk menggunakan campuran font yang berbeda di situs Anda untuk meningkatkan tipografi dan pengalaman pengguna.
Fon khusus tidak hanya tampak hebat, tetapi juga dapat meningkatkan keterbacaan, membuat citra merek, dan meningkatkan waktu yang dihabiskan pengguna di situs Anda.
Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan font khusus di WordPress menggunakan metode font Google, TypeKit dan CSS3 @ Font-Face.
catatan: Memuat terlalu banyak font dapat memperlambat situs Anda. Kami sarankan memilih dua font dan menggunakannya di situs Anda. Kami juga menunjukkan kepada Anda cara memuatnya dengan benar tanpa memperlambat situs Anda.
Sebelum kita melihat cara menambahkan font khusus di WordPress, mari kita lihat font khusus yang dapat Anda gunakan.
Cara menemukan font WordPress khusus
Sumur sebelumnya mahal, tetapi tidak lagi. Ada banyak tempat di mana Anda dapat menemukan font web gratis yang luar biasa seperti Google Font, Typekit, FontSquirrel dan fonts.com.
Jika Anda tidak tahu cara mencampur dan mencocokkan font, coba Pasangan Font. Bantu desainer menggabungkan font Google yang indah.
Saat memilih font Anda, ingatlah bahwa menggunakan terlalu banyak font khusus akan memperlambat situs Anda. Untuk alasan ini, pilih dua font dan gunakan di seluruh desain. Ini juga menambah konsistensi pada desain Anda.
Video tutorial
Berlangganan WPBeginner
Jika Anda tidak menyukai video atau lebih suka instruksi tertulis, baca terus.
Tambahkan font WordPress khusus dari font Google
Google Font adalah pustaka font terbesar, gratis dan paling banyak digunakan di antara pengembang situs web. Ada beberapa cara untuk menambah dan menggunakan font Google di WordPress.
Metode 1: Tambahkan Font Kustom dengan Plugin Google Easy Fonts
Untuk menambah dan menggunakan font Google di situs Anda, metode ini sejauh ini paling mudah dan direkomendasikan untuk pemula.
Pertama, instal dan aktifkan plugin Easy Google Fonts. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami untuk menginstal plugin WordPress.
Setelah aktivasi, Anda dapat pergi Penampilan »Penyesuai Sisi Ini membuka antarmuka pengguna untuk menyesuaikan tema, di mana Anda dapat melihat bagian Gaya baru.
Ketika Anda mengklik gaya, Anda melihat berbagai area situs Anda di mana Anda dapat menggunakan font Google. Cukup klik "Edit Sumber" di bagian yang ingin Anda edit.
Di bagian Keluarga Font, Anda dapat memilih font Google apa saja yang ingin Anda gunakan di situs Anda. Anda juga dapat memilih font, ukuran font, isi, margin, dan lainnya.
Bergantung pada tema Anda, jumlah bagian di sini mungkin terbatas, dan Anda mungkin tidak dapat secara langsung mengubah pemilihan font untuk berbagai area situs Anda.
Untuk memperbaiki ini, Anda juga dapat menggunakan plugin untuk membuat kontrol Anda sendiri dan menggunakannya untuk mengubah font di situs Anda.
Kunjungan pertama Pengaturan »Google Font Halaman dan masukkan nama untuk kontrol font Anda. Gunakan sesuatu untuk memahami dengan cepat di mana Anda ingin menggunakan kontrol sumber ini.
Kemudian klik tombol "Buat Verifikasi Font" dan Anda akan diminta untuk memasukkan pemilih CSS.
Anda dapat menambahkan elemen HTML yang ingin Anda targetkan (mis. H1, h2, p, blockquote) atau menggunakan kelas CSS.
Anda dapat menggunakan alat Inspect di browser Anda untuk mengetahui CSS apa yang mengelompokkan area spesifik yang ingin Anda ubah.
Sekarang klik tombol "Simpan verifikasi kode sumber" untuk menyimpan pengaturan Anda. Anda dapat membuat sebanyak mungkin pengontrol font yang Anda butuhkan untuk berbagai area situs Anda.
Untuk menggunakan driver font ini, Anda harus pergi Penampilan »Penyesuai dan klik pada tab Style.
Di bawah Tipografi, Anda sekarang juga akan melihat opsi "Tipografi Tematik". Ketika Anda mengkliknya, font khusus yang Anda buat di atas muncul. Anda sekarang dapat mengklik tombol Edit untuk memilih font dan tampilan kontrol ini.
Jangan lupa klik tombol Simpan atau Terbitkan untuk menyimpan perubahan Anda.
Metode 2: Menambahkan Google Font Secara Manual ke WordPress Secara Manual
Metode ini mengharuskan Anda untuk menambahkan kode ke file tema WordPress Anda. Jika Anda belum melakukannya, lihat panduan kami untuk menyalin dan menempelkan kode di WordPress.
Pertama, kunjungi perpustakaan font Google dan pilih font yang ingin Anda gunakan. Kemudian klik tombol untuk penggunaan cepat di bawah font.
Halaman Font mencantumkan gaya yang tersedia untuk font ini. Pilih gaya yang ingin Anda gunakan dalam proyek Anda dan kemudian klik tombol bilah sisi di bagian atas.
Lalu buka tab Sematkan di bilah sisi untuk menyalin kode yang disematkan.
Ada dua cara untuk menambahkan kode ini ke situs WordPress Anda.
Pertama, Anda cukup mengedit file header.php di tema Anda dan menempelkan kode terlebih dahulu
Hari
Namun, jika Anda tidak terbiasa dengan mengedit kode di WordPress, Anda dapat menambahkan kode ini menggunakan plugin.
Cukup instal dan aktifkan plugin "Sisipkan header dan footer". Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami untuk menginstal plugin WordPress.
Setelah aktivasi, masuk ke Pengaturan »Masukkan header dan footer Halaman dan rekatkan kode sematan di bidang "Scripts in header".
Jangan lupa klik tombol Simpan untuk menyimpan perubahan Anda. Plugin sekarang memuat kode sematan Google Font di setiap halaman situs Anda.
Anda dapat menggunakan font ini dalam style sheet tema Anda sebagai berikut:
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
Untuk instruksi lebih rinci, lihat panduan kami untuk menambahkan font Google ke tema WordPress.
Tambahkan font WordPress khusus dengan Typekit
Adobe Fonts Typekit adalah sumber daya gratis dan premium lainnya untuk font hebat yang dapat Anda gunakan dalam proyek desain Anda. Anda memiliki langganan berbayar dan paket gratis terbatas yang dapat Anda gunakan.
Cukup mendaftar untuk akun Adobe Font dan buka bagian Font Font. Dari sini, klik tombol untuk memilih sumber dan membuat proyek.
Selanjutnya, Anda akan melihat kode sematan dengan ID proyek Anda. Anda juga akan belajar cara menggunakan font CSS untuk tema Anda.
Anda perlu menyalin dan menempelkan kode ini ke
Bagian dari situs Anda.
Ada dua cara untuk menambahkan kode ini ke situs WordPress Anda.
Pertama, Anda cukup mengedit file header.php di tema Anda dan menempelkan kode terlebih dahulu
Hari
Namun, jika Anda tidak terbiasa dengan mengedit kode di WordPress, Anda dapat menambahkan kode ini menggunakan plugin.
Cukup instal dan aktifkan plugin "Sisipkan header dan footer".
Setelah aktivasi, masuk ke Pengaturan »Masukkan header dan footer Halaman dan rekatkan kode sematan di bidang "Scripts in header".
Anda sekarang dapat menggunakan font Typekit yang Anda pilih di lembar gaya tata letak WordPress Anda sebagai berikut:
h1 .site-title {
font-family: gilbert, sans-serif;
}
Untuk instruksi lebih rinci, lihat tutorial kami tentang cara menambahkan font WordPress yang hebat dengan Typekit.
Tambahkan font WordPress khusus dengan CSS3 @ font-face
Cara paling langsung untuk menambahkan font khusus di WordPress adalah menambahkan font menggunakan metode CSS3 @ font-face. Metode ini memungkinkan Anda untuk menggunakan font apa pun yang Anda inginkan di situs Anda.
Pertama, unduh font yang diinginkan dalam format web. Jika Anda tidak memiliki format web untuk font Anda, Anda dapat mengonversinya menggunakan generator font web FontSquirrel.
Setelah Anda memiliki file font web, unggah ke server hosting WordPress Anda.
Tempat terbaik untuk memuat font adalah di folder font baru di tema atau perpustakaan sekunder Anda.
Anda dapat menggunakan FTP atau manajemen file dari cPanel Anda untuk memuat font.
Setelah memuat font, muat ke dalam style sheet untuk tema Anda menggunakan aturan font CSS3 @ berikut:
@font-face {
font-family: Arvo;
src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Jangan lupa ganti keluarga font dan URL dengan milik Anda.
Kemudian Anda dapat menggunakan font ini di mana saja di style sheet tema Anda sebagai berikut:
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}
Memuat font secara langsung dengan CSS3 @ font-face tidak selalu merupakan solusi terbaik. Jika Anda menggunakan font Google atau font Typekit, lebih baik untuk menentukan font langsung dari server Anda untuk kinerja terbaik.
Kami harap artikel ini telah membantu Anda menambahkan font WordPress khusus. Anda juga dapat membaca panduan kami tentang penggunaan font simbol di WordPress dan mengubah ukuran font di WordPress.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.
