Bagaimana Cara Menggunakan Google Font Dengan WordPress?

Web modern adalah tentang pengalaman pengguna. Perusahaan menginvestasikan banyak waktu dan uang untuk memastikan bahwa pengunjung situs web mereka mendapatkan pengalaman terbaik saat menjelajahi situs web mereka.

Representasi teks memainkan bagian integral dalam estetika situs web. Tidak masalah seberapa bagus kualitas konten Anda; jika tidak menyenangkan untuk dibaca dan terlalu berantakan bagi pembaca, maka semua usaha Anda akan sia-sia.

Meskipun ada sejumlah opsi tipografi yang tersedia untuk Anda, cara termudah untuk mendapatkan akses ke ratusan font profesional (gratis) adalah dengan menggunakan Google Font dengan situs WordPress Anda.

Dalam posting ini, saya akan memberi Anda petunjuk langkah demi langkah untuk mempelajari cara menambahkan font Google WordPress dengan situs web Anda secara manual dan dengan menggunakan plugin Easy Google Fonts . Saya juga akan menunjukkan font terbaik yang dapat Anda gunakan untuk meningkatkan keterbacaan konten situs web Anda.

1- Apa Itu Font Google WordPress dan Mengapa Anda Harus Menggunakannya?

Sebelum kita mulai, mari kita lihat apa itu Google Font bersama dengan keuntungan utama menggunakannya di situs WordPress Anda.

Google Fonts adalah perpustakaan font berlisensi gratis yang diluncurkan pada tahun 2010. Anda dapat menggunakan perpustakaan Google Font yang menakjubkan dengan memanggil API yang disediakan. Fakta yang menarik adalah Anda dapat menggunakan 877 font yang dioptimalkan untuk web – gratis. Itu luar biasa. Ini fitur direktori web interaktif yang memungkinkan Anda untuk mencari jenis font tertentu dan mengujinya di browser web Anda.

Menggunakan WordPress Google Font memiliki sejumlah keuntungan. Mereka bebas untuk digunakan (bahkan untuk proyek komersial), pra-host (sehingga mereka tidak akan mengambil sumber daya server Anda), dan dapat diunduh (Anda dapat menggunakannya dalam bentuk cetak).

Ada sejumlah besar situs web yang saat ini menggunakan Google Font di WordPress untuk keuntungan mereka. Semua tema modern mendukung penggunaan Google Font.

Jika Anda siap untuk mengubah tipografi situs Anda dengan font web yang mudah digunakan, maka yang harus Anda lakukan adalah menemukan font yang tepat dan menggunakannya dengan situs WordPress Anda.

2- Cara Menambahkan Font Google ke WordPress Secara Manual

Google Font mengambil sebagian besar pekerjaan berat dari menyematkan keluarga font ke situs web Anda. Ini adalah perpustakaan online yang dapat dipanggil dalam proyek web apa pun seperti skrip JS atau CSS lainnya.

Di bagian ini, saya akan menunjukkan kepada Anda cara menginstal Google Font secara manual di situs WordPress.

Langkah 1: Temukan Font yang Ingin Anda Tambahkan ke Situs Web Anda

Untuk memulai, jelajahi direktori Google Fonts dan pilih font yang ingin Anda gunakan di situs WordPress Anda. Jika Anda sudah memiliki jenis huruf tertentu, Anda cukup mencarinya menggunakan kotak pencarian di bilah sisi kanan.

Anda juga dapat memfilter font menurut kategori, bahasa, jumlah gaya, ketebalan, kemiringan, dan lebar atau mengurutkannya berdasarkan tanggal penambahannya, menurut abjad, tren, atau menurut popularitas.

• Ini adalah font yang memiliki garis-garis kecil di akhir goresan huruf, misalnya Times New Roman dan Courier .
• Sans Serif. Font yang tidak memiliki garis kecil di akhir goresan huruf adalah font sans-serif misalnya Helvetica dan Roboto .
• Tampilan font terutama digunakan untuk teks besar misalnya judul.
• Font yang memiliki tampilan tulisan tangan misalnya Pacifico .
• Font yang memiliki spasi yang sama persis untuk semua karakter misalnya Source Code Pro .

Salah satu keuntungan terbaik menggunakan fitur direktori interaktif Google Font adalah Anda dapat dengan cepat melihat pratinjau font yang Anda minati. Yang harus Anda lakukan adalah mengeklik kotak bidang font dan mengetik teks di dalamnya.

Untuk tujuan tutorial ini, saya akan menggunakan Open Sans .

Langkah 2: Tambahkan Font ke Pilihan Anda

Sekarang kita tahu font mana yang akan kita gunakan, mari tambahkan ke pilihan kita. Anda dapat melakukan ini dengan mengklik tanda plus (+) di sudut kanan atas kotak keluarga font.

Anda dapat menambahkan keluarga font sebanyak yang Anda inginkan ke pilihan Anda. Setelah Anda siap, klik bilah X Family Selected hitam di bagian bawah layar untuk melihat pilihan Anda.

Langkah 3: Sesuaikan Font

Bilah X Family Selected membuka jendela yang memiliki dua tab – Sematkan dan Kustomisasi . Sebelum kami menyematkan keluarga font ke situs web WordPress kami, kami akan meluangkan waktu untuk menyesuaikannya sedikit.

Dari layar Kustomisasi , centang kotak untuk gaya dan bahasa yang ingin Anda gunakan di situs web Anda.

Ingatlah bahwa semakin banyak gaya font dan bahasa yang Anda pilih, semakin lama waktu yang dibutuhkan untuk memuat halaman situs Anda. Anda akan melihat indikator Waktu Muat di layar yang sama yang memberi tahu Anda jika pilihan Anda akan membuat waktu muat menjadi lambat.

Untuk menjaga agar pemilihan font tidak memengaruhi waktu pemuatan halaman situs, kami memutuskan untuk memilih pilihan sederhana – light 300 dan regular 400 .

Langkah 4: Sematkan Font Google ke Situs WordPress Anda

Ada beberapa cara Anda dapat menambahkan font khusus ke WordPress. Kami akan menunjukkan cara melakukannya menggunakan fungsi wp_enqueue_style() karena ini adalah pendekatan yang disarankan untuk situs web WordPress.

Mulailah dengan kembali ke tab Sematkan dan salin tautan (URL) pilihan font Anda ke clipboard Anda. Dalam kasus kami, URL lengkapnya adalah: https://fonts.googleapis.com/css?family=Open+Sans:300.400 .

Selanjutnya, masuk ke dashboard WordPress Anda dan di dalam Appearance buka Editor dan buka file functions.php tema aktif Anda menggunakan klien FTP dan tambahkan kode berikut ke dalamnya.

 fungsi add_google_fonts() {

wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Open+Sans:300.400', false );}

add_action( 'wp_enqueue_scripts', 'add_google_fonts');

Catatan: Anda harus mengganti URL dengan milik Anda sendiri.

Anda dapat mulai menggunakan font yang baru saja Anda tambahkan dengan menggunakan opsi tipografi tema Anda (jika mendukungnya) atau dengan menambahkan beberapa kode ke lembar gaya utama tema aktif Anda. Misalnya, jika kami ingin mengubah semua judul H2 ke font baru kami, kode kami mungkin terlihat seperti ini:

 h2 {

font-family: 'Buka Sans', sans-serif;

}

Saya telah berhasil memutakhirkan WordPress saya dengan Google Font. Ada kemungkinan bahwa Google Font mungkin tidak berfungsi karena beberapa alasan aneh dan saya harus merujuk ke set font default yang dapat ditampilkan sebagai cadangan. Tapi ini cukup jarang terjadi.

Mengapa Kecepatan Penting untuk SEO & UX?

Kiat ahli ini akan menunjukkan kepada Anda cara meningkatkan kecepatan Situs WordPress Anda.

Saya setuju dengan Ketentuan Layanan & Kebijakan Privasi Cloudways

Dapatkan Ebook Sekarang!

Terima kasih

Ebook Anda sedang menuju Kotak Masuk Anda.

Untuk melakukannya, cukup tambahkan jenis font default yang dihosting secara lokal seperti Georgia, Cambria, atau Courier.

3- Cara Menambahkan Font Google ke WordPress Menggunakan Plugin

Bagi sebagian orang, integrasi manual WordPress Google Font mungkin bukan pilihan. Jangan khawatir. Ada cara lain (lebih sederhana) untuk menambahkan Google Font ke situs WordPress Anda. Melalui sebuah plugin.

Di bagian ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat mengintegrasikan Google Font di WordPress menggunakan plugin Easy Google Fonts .

Langkah 1: Instal dan Aktifkan Plugin

Masuk ke panel admin WordPress Anda dan arahkan ke Plugins > Add New . Cari Font Google Mudah dan instal di situs web Anda.

Setelah plugin diinstal, klik tombol Activate untuk mulai menggunakannya.

Langkah 2: Mulailah Menggunakan Google Font

Setelah Anda mengaktifkan plugin ke situs web Anda, itu akan secara otomatis mengantrekan stylesheet untuk Google Font yang Anda pilih untuk digunakan. Untuk memulai, buka Appearance > Customize dari panel admin WordPress.

Anda akan melihat bahwa item menu baru telah ditambahkan ke Penyesuai WordPress yang disebut Tipografi .

Ini memungkinkan Anda untuk mengontrol pengaturan tipografi paragraf Anda dan berbagai judul (H1 hingga H6).

Katakanlah Anda ingin mengedit font Paragraphs di situs web Anda, plugin Easy Google Fonts memungkinkan Anda menyesuaikan gaya, tampilan, dan posisinya. Mari kita lihat berbagai opsi gaya yang ditampilkannya.

Dari tab Gaya , Anda dapat mengonfigurasi skrip, jenis font, bobot font, dekorasi teks, dan transformasi teks. Opsi keluarga font memberi Anda akses ke ratusan Google Font yang dikategorikan sebagai Standard Web Fonts , Google Serif Fonts , Google Sans Serif Fonts , Google Display Fonts , Google Handwriting Fonts , dan Google Monospace Fonts .

Jadi, jika kita ingin menggunakan Open Sans , kita akan mengatur opsi skrip ke Latin , opsi keluarga font ke Open Sans dan bobot font ke Regular (yang setara dengan Regular 400 ).

Cukup periksa bagaimana font berubah di layar pratinjau? Salah satu manfaat utama menggunakan plugin Easy Google Fonts adalah Anda dapat melihat langsung seperti apa tampilan postingan dan halaman Anda saat Anda memilih font untuk digunakan.

4- Font Terbaik untuk Digunakan

Langit adalah batas dalam hal pemilihan font dengan Google Font. Anda, sebagai seorang webmaster, memiliki kebebasan untuk memilih font mana saja yang Anda anggap cocok untuk pembaca Anda. Namun, ada beberapa font yang populer untuk dibaca.

Mari kita lihat Google Font terbaik yang banyak digunakan dan memberikan keterbacaan terbaik.

1. Lora

Lora adalah salah satu keluarga font yang banyak digunakan karena keterbacaan dan variannya.

2. Tampilan Playfair

Keluarga font ini memberikan keterbacaan teks yang lebih baik dan cocok untuk web dan cetak.

3. Arsip

Jenis huruf ini termasuk dalam keluarga jenis huruf sans serif yang aneh. Ini memiliki tampilan bersih yang cocok untuk teks isi.

4. Robot

Roboto adalah salah satu font yang paling umum digunakan di web modern. Itu tampak hebat dengan desain web minimal dan memberikan keterbacaan yang sangat baik kepada pengguna.

5. Montserrat

Montserrat berakar pada tipografi perkotaan abad kedua puluh. Keluarga font lain yang sangat populer yang hadir dengan sejumlah varian.

6. Rubik

Sangat bersih, Rubik adalah keluarga font san serif yang telah melayani lebih dari 470.000 situs web di seluruh dunia.

7. Sumber Sans

Anda pasti telah menggunakan keluarga font Source Sans karena memiliki lebih dari 4,18 miliar iterasi melalui Google Fonts API.

8. Lato

Lato juga merupakan jenis huruf Sans Serif dan dianggap sebagai font yang profesional dan jelas oleh webmaster. Ini digunakan di hampir setiap posisi konten.

9. PT Serif

Dengan lebih dari satu juta situs web menggunakan font ini, PT Serif adalah salah satu font Google yang paling banyak digunakan. Sangat cocok untuk web dan dokumen cetak.

10. Buka Sans

Font Open Sans paling dekat dengan tulisan manusia yang membuatnya lebih mudah dibaca baik di web maupun di atas kertas. Google Fonts API telah menyajikan font ini lebih dari 28,5 miliar kali hanya dalam seminggu!

Ada banyak Google Font untuk situs web WordPress yang tersedia. Bijaksanalah saat memilih jenis font karena dapat berdampak positif dan negatif pada pembaca situs Anda.

5- Praktik Terbaik Menggunakan Google Font di Situs Web

Mengintegrasikan WordPress Google Font bukanlah ilmu roket, tetapi selalu ada dua cara untuk melakukan tugas apa pun – cara yang baik dan cara terbaik.

Mari kita periksa praktik terbaik yang terlibat dalam menggunakan Google Font di WordPress.

– Batasi Bobot Font: Memilih set bobot font yang lengkap memang menggoda tetapi memiliki kekurangan. Untuk setiap varian, API menjadi lebih berat dan membutuhkan lebih banyak waktu untuk memuat set lengkap bobot font.

Ini biasanya dimuat di awal halaman web, dan jika tidak dioptimalkan, dapat memperlambat waktu pemuatan awal halaman web Anda.

-Host Font Lokal: Font Google adalah perpustakaan online yang di-host di tempat lain. Meskipun memiliki dampak minimal pada kinerja situs Anda, namun, jika tidak tersedia, Anda masih dapat server font Google yang dipilih jika dihosting secara lokal.

-Aksesibilitas penting: Ini bukan pilihan lagi untuk mengoptimalkan situs web Anda bagi orang-orang dengan gangguan penglihatan. Font Google memungkinkan Anda untuk menata font Anda dengan cara yang paling nyaman untuk jenis pengunjung ini.

Gunakan kontras yang mudah dibaca di sebagian besar ukuran dan jenis layar, dan tidak berat bagi mata pembaca. Menggunakan warna yang sangat cerah atau warna yang sangat terang tidak ideal. Pilih warna dan ukuran yang paling cocok untuk sebagian besar pembaca.

Kesimpulan

Menggunakan Google Font di WordPress dapat membantu Anda dengan cepat mengubah tampilan dan nuansa situs web Anda. Apakah Anda mencoba untuk pergi untuk situs yang tampak profesional atau satu yang menyenangkan, kemungkinan Google Fonts memiliki font yang sempurna untuk Anda.

Kami menunjukkan kepada Anda bagaimana Anda dapat menambahkan Google Font ke situs web Anda secara manual menggunakan fungsi wp_enqueue_style() dan dengan menggunakan plugin Easy Google Fonts. Mudah-mudahan, Anda berada dalam posisi yang baik sekarang untuk melangkah lebih jauh sendiri.

Pernahkah Anda menggunakan perpustakaan font di situs WordPress Anda? Kami akan senang mendengar dari Anda, jadi beri tahu kami dengan berkomentar di bawah!