Bagaimana Menambahkan Font Kustom ke WordPress?

Diterbitkan: 2020-11-05

Belajar menyesuaikan tipografi situs web Anda adalah aspek yang cukup mendasar dalam membuat dan menjalankan situs web. Ini dapat mengubah keseluruhan nuansa situs web Anda dan membuat perbedaan besar dalam cara pengunjung berinteraksi dengan pelanggan Anda.

Jadi, penting untuk mengetahui cara menambahkan font khusus ke WordPress. Memilih font yang tepat menciptakan tampilan berbeda untuk situs web Anda, memungkinkan Anda membangun merek visual Anda, dan meningkatkan keterbacaan dan keterlibatan pengunjung.

Ada ribuan font yang tersedia online yang dapat Anda gunakan, banyak di antaranya gratis. Artikel ini akan membahas tentang menambahkan font dari dua database font web paling populer ke situs web Anda — Google Fonts dan Adobe Fonts, juga dikenal sebagai Typekit Fonts. Pustaka font ini mencakup ribuan font web yang dapat Anda unduh.

Ada banyak perpustakaan font lain di internet di samping ini, dan kami akan membicarakannya juga.

Berikut adalah cara Anda dapat menambahkan font khusus ini ke situs web Anda:

Daftar isi

Cara Menambahkan Font Kustom ke WordPress
- 1. Tambahkan Font Google Menggunakan Plugin
- 2. Tambahkan Font Google Menggunakan Kode
- 3. Tambahkan Font Adobe TypeKit ke WordPress
Beberapa Perpustakaan Font Kustom Lainnya
Cara Menambahkan Font Kustom Lainnya Menggunakan Plugin
Cara Menambahkan Font Kustom Lainnya Secara Manual
Kesimpulan

Cara Menambahkan Font Kustom ke WordPress

1. Tambahkan Font Google Menggunakan Plugin

Jika Anda berencana menggunakan Google Fonts untuk menyesuaikan dgn mode konten situs web WordPress Anda, maka ada alat praktis yang secara langsung menghubungkan Penyesuai WordPress Anda dengan database Google Fonts. Easy Google Fonts gratis dan memungkinkan Anda menggunakan Google Fonts tanpa harus bekerja dengan kode apa pun.

Untuk cara ini, install terlebih dahulu plugin Easy Google Fonts. Setelah plugin diatur, Anda akan menemukan opsi baru yang disebut 'Tipografi' di Penyesuai WordPress Anda (Tampilan > Sesuaikan).

2. Setelah Anda masuk ke opsi Tipografi, Anda akan menemukan bagian konten default yang berbeda atau kontrol font yang dapat Anda sesuaikan. Anda dapat menemukan pengaturan font untuk grup tertentu dengan mengklik 'Edit Font.'

Pengaturan font cukup luas dan memungkinkan Anda untuk menyesuaikan hampir setiap aspek teks Anda untuk membuat gaya font yang diinginkan, seperti ukuran font dan banyak lagi. Anda dapat mengubah font untuk kategori teks tertentu dari opsi Keluarga Font di bawah tab Gaya.

Di bawah tab Appearance, Anda dapat menemukan opsi umum lainnya, seperti Font Color, Font Size, dan Line Height.

Ada beberapa kontrol visual mendalam di bawah tab Positioning, seperti Margin, Padding, dan Border.

3. Sekarang, situs web Anda mungkin juga memerlukan perhatian khusus pada kategori teks tertentu yang mungkin tidak ditangani oleh kontrol font default yang disediakan oleh plugin ini. Mungkin Anda hanya ingin pengaturan tipografi yang sama untuk semua judul Anda dan ingin satu kategori untuk mengontrol semuanya. Anda dapat membuat kontrol font khusus dengan membuka Pengaturan > Google Font.

4. Buka tab Kelola Kontrol Font, dan klik 'Buat Kontrol Font.'

5. Anda akan diminta untuk menyediakan Pemilih CSS untuk menentukan kategori khusus ini. Kemudian, klik 'Kontrol Font Aman' untuk membuat kategori/kontrol font baru.

6. Kontrol font kustom dapat ditemukan di lokasi yang berbeda dari yang default. Kembali ke WordPress Customizer dan klik opsi Tipografi. Anda akan menemukan bahwa ada dua kategori — Tipografi Default dan Tipografi Tema. Kontrol font khusus akan ditemukan di bawah opsi Tipografi Tema.

2. Tambahkan Font Google Menggunakan Kode

Jika Anda ingin menambahkan Google Font Anda ke WordPress tanpa plugin, Anda dapat menambahkan kode ke file tema Anda. Anda mungkin ingin membuat tema anak untuk ini sehingga Anda dapat mengembalikan perubahan jika Anda tidak menyukainya.

2. Buka situs web Google Fonts dan temukan font yang Anda suka. Anda akan menemukan gaya yang berbeda dari setiap font di halaman font. Klik tombol 'Pilih gaya ini' untuk gaya yang diinginkan. Font yang Anda pilih akan disimpan untuk digunakan di bagian khusus. Di kanan atas halaman, ada tombol untuk melihat font yang Anda pilih. Ini membuka sidebar dengan dua tab. Klik pada tab 'Sematkan'.

3. Copy link embed ini dan paste di file header.php Anda, tepat sebelum tag <body>.

4. Jika Anda tidak ingin repot bekerja dengan file tema, maka ada plugin praktis yang disebut Sisipkan Header dan Footer yang dengan mudah menambahkan kode ke file tema Anda. Anda dapat menggunakan plugin ini melalui bagiannya sendiri di bilah pengaturan berjudul 'Sisipkan Header dan Footer'. Cukup rekatkan kode di kotak 'Scripts in Header'.

3. Tambahkan Font Adobe TypeKit ke WordPress

Adobe memiliki perpustakaan font khusus lainnya yang mengesankan dengan versi gratis dan berbayar. Sebelum Anda mulai menggunakan font mereka, Anda memerlukan akun di situs web Adobe Fonts. Anda dapat mulai menelusuri font yang tersedia dari halaman Telusuri Font .

Setelah Anda masuk ke situs web, Anda dapat menggunakan font yang Anda suka dengan mengklik tombol </>.

2. Untuk mendapatkan tautan embed, Anda perlu membuat proyek web di Adobe Fonts dan menambahkan font yang dipilih ke proyek.

3. Seperti proses dengan Google Fonts, Anda harus menempelkan link embed ini ke file header.php tema Anda sebelum tag <body>.

4. Anda dapat menghindari bekerja secara langsung dengan file tema dengan menggunakan plugin Insert Headers and Footers. Cukup buka opsi Sisipkan Header dan Footer di bilah Pengaturan dan tempel kode semat ke kotak 'Script di Header'. Ini akan mengimpor font TypeKit yang telah Anda pilih.

Beberapa Perpustakaan Font Kustom Lainnya

Sementara Google Fonts dan Adobe Fonts adalah beberapa database paling populer untuk font web di luar sana. Namun, ada banyak perpustakaan font lain yang dapat Anda jelajahi untuk mengunduh font yang tepat untuk situs WordPress Anda. Berikut beberapa yang dapat Anda jelajahi:

TemplateMonster
Tupai Font
Musim semi font
1001 Font Gratis
Font Freak
Font Abstrak
MyFonts

Cara Menambahkan Font Kustom Lainnya Menggunakan Plugin

Ada plugin praktis yang disebut Use Any Font yang memungkinkan Anda melewati kerepotan menambahkan font khusus secara manual. Ini memberi Anda antarmuka sederhana di mana Anda dapat menambahkan font baru langsung dari dasbor Anda dan menetapkan font khusus Anda ke elemen yang diinginkan.

Cara Menambahkan Font Kustom Lainnya Secara Manual

Jika Anda ingin menambahkan font yang diinginkan secara manual, Anda perlu mengunggah file font ke direktori WordPress Anda. Gunakan tema anak untuk ini untuk membangun lapisan keamanan jika Anda tidak menyukai tampilan baru atau beberapa perubahan yang tidak diinginkan membuat bug di situs web Anda. Tema anak akan memungkinkan Anda untuk mengembalikan perubahan dengan mudah.

Unduh font yang Anda inginkan dari perpustakaan font apa pun seperti TemplateMonster. Kemudian, buka wp-content/themes/your-theme/fonts dan unggah ke folder Font menggunakan klien FTP. Jika tidak ada folder Font, buatlah.

Setelah file font diunggah, Anda perlu mengimpor font menggunakan stylesheet Anda. Tambahkan kode berikut ke file style.css Anda:

@font-wajah {

font-family: Font Kustom;

src: url(http://situswebanda.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);

font-berat: normal;

}

Anda perlu mengganti font-family dengan nama font yang ingin Anda impor dan URL dengan URL situs web Anda.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan font kustom ke situs WordPress Anda dengan kerumitan minimal. Ada ribuan font web yang dapat Anda gunakan hanya dari database Google Fonts dan Adobe Fonts. Dengan pilihan font khusus yang tepat, situs web Anda dapat memperoleh pesona yang berbeda, melibatkan pengunjung dengan lebih baik, dan menciptakan estetika yang lebih baik yang relevan dengan topik Anda.