Cara Mengoptimalkan Google Font di WordPress

Semua orang tahu bahwa memiliki situs web yang dirancang dengan baik adalah kunci untuk menarik lebih banyak pengunjung. Salah satu cara untuk membuat situs web Anda terlihat menarik tetapi tidak mengganggu kegunaan adalah dengan menggunakan font yang tepat. Pada artikel ini, kami akan mengeksplorasi bagaimana Anda dapat mengoptimalkan font Google di WordPress untuk kinerja yang lebih baik dan pengalaman pengguna yang lebih baik.

Sebelum kita mulai, mari kita lihat apa sebenarnya font google itu dan mengapa kita harus mengoptimalkan font Google di WordPress.

Apa itu Google Font?

Google Fonts adalah pustaka font gratis, dengan lebih dari 1300 font sumber terbuka yang dibuat oleh tim Google yang dapat Anda gunakan di situs web Anda. Mereka tersedia dalam berbagai gaya dan bobot. Anda dapat menemukannya di keluarga Serif dan Sans-Serif, serta berbagai font Tampilan dan Tulisan Tangan. Anda dapat menggunakan font ini sebagai teks isi atau judul, di situs web Anda, di email Anda, atau bahkan di dokumen cetak Anda.

Jika Anda tidak yakin font mana yang harus dipilih, Google menyediakan alat pratinjau praktis sehingga Anda dapat melihat tampilan setiap font di situs web Anda. Pustaka ini juga menyertakan sejumlah besar font internasional , dengan dukungan untuk lebih dari 200 bahasa. Saat menggunakan Google Fonts, Anda tidak perlu memasang perangkat lunak apa pun di komputer atau khawatir tentang masalah hak cipta. Yang perlu Anda lakukan hanyalah menautkan font ke situs web Anda, dan Anda siap melakukannya.

Google Fonts juga dirancang agar sesuai dengan ukuran layar yang berbeda, membuatnya mudah digunakan di perangkat apa pun. Google Fonts juga memudahkan untuk berkreasi dengan tipografi. Dengan ratusan font di perpustakaannya, Anda dapat membuat desain menakjubkan yang menonjol dari yang lain. Dan, jika Anda ingin menggunakan satu font untuk beberapa desain, Anda juga dapat menggabungkan font untuk tampilan yang unik.

Mengapa Kita Harus Mengoptimalkan Google Font di WordPress?

Banyak orang sering menggunakan Google Font karena gratis dan mudah digunakan. Namun, ketika terlalu banyak font yang digunakan di satu situs web, ini dapat menyebabkan waktu pemuatan yang sangat lambat. Ini karena setiap font harus dimuat secara terpisah dari server sebelum dapat ditampilkan di halaman.

Namun dengan mengoptimalkan font Google, jumlah permintaan yang dibuat oleh browser berkurang, sehingga kecepatan pemuatan menjadi lebih cepat. Waktu pemuatan yang lebih cepat dapat membuat perbedaan besar pada kinerja situs web Anda, karena meningkatkan keterlibatan pengguna dan mengurangi rasio pentalan.

Selain itu, salah satu manfaat yang paling nyata adalah peningkatan tampilan situs web Anda. Dengan tipografi yang lebih baik, situs web Anda akan lebih menarik secara visual dan memikat pengunjung. Selain itu, Google Fonts juga menawarkan berbagai font internasional, yang dapat meningkatkan kegunaan situs web Anda. Dengan memasukkan font dari berbagai bahasa, Anda dapat membuat situs web Anda lebih mudah diakses oleh orang-orang dari berbagai latar belakang.

Dan terakhir, mengoptimalkan Google Font dapat membantu meningkatkan SEO situs web Anda. Dengan menggunakan font yang dioptimalkan untuk mesin pencari, Anda dapat meningkatkan peringkat situs web Anda di hasil pencarian.

Sekarang Anda mungkin bertanya-tanya bagaimana kami dapat menambahkan font Google ke WordPress. Mari kita cari tahu di bagian selanjutnya.

Bagaimana Cara Menambahkan Font Google ke WordPress?

Ada berbagai metode untuk menambahkan font Google ke WordPress. Namun, kami akan menggunakan metode yang cepat dan mudah, tentu saja, metode plugin.

Untuk demonstrasi ini, kami akan menggunakan plugin Google Fonts Typography karena ini adalah salah satu alat gratis terbaik yang memungkinkan Anda menyertakan Google Fonts di situs web Anda tanpa harus menulis satu baris kode pun.

Sebelum beralih ke tutorial, ingatlah bahwa sebagian besar tema WordPress hadir dengan dukungan font Google terintegrasi. Jika Anda menggunakan tema yang menyertakan integrasi Google Fonts, Anda dapat mengubah tipografi situs Anda dari panel tema atau penyesuai WordPress. Jadi, sebelum Anda memulai proses menyertakan Google Fonts di situs Anda, sebaiknya periksa dulu apakah tema Anda sudah menyertakan Google Fonts.

Sekarang mari kita mulai dengan menginstal pengaktifan plugin Google Fonts Typography.

Langkah 1: Instal dan Aktifkan plugin Google Fonts Typography

Untuk menginstal plugin, arahkan ke Plugins > Add New di dashboard WordPress Anda. Masukkan kata kunci plugin di sini dan cari di repositori plugin WordPress.

Saat Anda menemukan plugin di hasil pencarian, klik Instal Sekarang . Hanya perlu beberapa saat untuk menginstal. Setelah instalasi, klik tombol Activate untuk mengaktifkan plugin di website Anda.

Anda juga dapat menginstal plugin secara manual. Untuk informasi lebih lanjut, silakan lihat panduan kami tentang cara memasang plugin WordPress secara manual.

Kemudian, arahkan ke Plugins dan periksa pengaturan plugin. Ketika Anda mengkliknya, Anda akan dialihkan ke penyesuai WordPress. Dari sana, Anda dapat mengontrol tipografi situs web Anda.

Ada 4 pengaturan utama yang dapat Anda konfigurasikan.

Langkah 2: Konfigurasikan Pengaturan Plugin

Dari pengaturan dasar , Anda dapat memilih jenis font default untuk badan, tajuk, dan kolom input dari bagian tipografi dasar. Anda dapat memilih salah satu dari ratusan Font Google dari menu tarik-turun di bawah setiap bagian Font Family. Jika Anda tahu font apa yang Anda inginkan, ketik saja di kotak pencarian.

Di sisi lain, dari pengaturan lanjutan , Anda dapat memilih jenis font untuk branding, navigasi, konten, sidebar, dan footer Anda. Ini adalah fitur yang berguna jika Anda ingin menggunakan font yang berbeda di berbagai bagian situs web Anda.

Opsi pengaturan lainnya adalah Pemuatan Font . Anda cukup menghapus centang bobot font apa pun yang tidak Anda perlukan. Kemudian klik Terbitkan . Akhirnya, Anda dapat menemukan opsi pengaturan yaitu Debugging . Dalam pengaturan ini, Anda dapat mengatur ulang semua font Anda dan memulai dari awal, dan Anda juga dapat menghapus cache font.

Dan itu saja. Dengan menggunakan langkah-langkah ini, Anda dapat dengan mudah menambahkan font Google ke situs web WordPress Anda,

Tips Mengoptimalkan Google Font di WordPress

Sekarang Anda telah menambahkan font Google ke situs web WordPress Anda. Berikut adalah tips yang dapat Anda gunakan untuk mengoptimalkan font Google di WordPress.

1. Gunakan tumpukan font yang benar

Ketika datang untuk menggunakan tumpukan font yang benar untuk proyek web Anda, ada beberapa hal yang perlu diingat. Tumpukan font adalah kumpulan font yang menampilkan teks di situs web. Font dalam tumpukan font biasanya dipilih agar dapat menampilkan teks dalam berbagai bahasa yang berbeda.

Pertama, Anda ingin memastikan bahwa font yang Anda gunakan adalah font yang tersedia secara luas di sebagian besar perangkat. Kedua, Anda ingin menggunakan tumpukan font yang menyertakan beberapa font berbeda jika salah satu font yang Anda gunakan tidak tersedia di perangkat tertentu.

Dan terakhir, Anda perlu memastikan bahwa font yang Anda pilih menampilkan teks dalam bahasa yang ingin Anda dukung. Selain itu, pastikan font yang Anda pilih kompatibel dengan browser yang akan digunakan pengguna Anda dan juga dapat dibaca di semua jenis perangkat.

2. Tentukan rangkaian karakter

Saat membuat dokumen baru, Anda dapat menentukan kumpulan karakter mana yang akan digunakan. Penting untuk menentukan rangkaian karakter yang digunakan agar teks dapat ditampilkan dengan benar. Terutama jika Anda bekerja dengan bahasa yang menggunakan karakter non-Latin, seperti bahasa Arab, China, Jepang, atau Rusia.

Jika Anda tidak yakin rangkaian karakter mana yang akan digunakan, Anda dapat melihat daftar rangkaian karakter yang didukung oleh berbagai bahasa. Setelah Anda memilih rangkaian karakter, pastikan untuk menyimpan dokumen Anda menggunakan rangkaian karakter tersebut.

Ada banyak kumpulan karakter berbeda yang dapat ditentukan saat bekerja dengan teks. Rangkaian karakter yang paling umum adalah rangkaian karakter ASCII, yang mencakup semua alfabet dan angka bahasa Inggris standar. Kumpulan karakter lain dapat digunakan untuk bahasa lain.

3. Jangan mengandalkan fallback otomatis

Dalam hal mengembangkan web, penting untuk tidak mengandalkan fallback otomatis. Ini karena fallback otomatis sering kali dapat menyebabkan hasil yang tidak terduga dan bahkan dapat menyebabkan situs Anda rusak. Alih-alih, yang terbaik adalah selalu menguji situs Anda di sebanyak mungkin browser dan perangkat dan memastikannya berfungsi sebagaimana mestinya. Jika memungkinkan, coba berikan fallback manual atau solusi alternatif yang dapat digunakan jika fallback otomatis gagal.

4. Gunakan bobot dan gaya yang tepat

Penting untuk menggunakan hierarki dalam font Anda sehingga pembaca dapat dengan mudah memindai halaman dan mengetahui di mana menemukan informasi yang paling penting. Bobot dan gaya yang Anda gunakan untuk judul harus berbeda dari yang Anda gunakan untuk teks isi. Untuk teks isi, bobot ringan hingga sedang adalah yang terbaik, dengan font sans-serif yang sederhana. Untuk judul, Anda dapat menggunakan bobot yang lebih tebal, dan Anda mungkin ingin mempertimbangkan untuk menggunakan font serif.

Jika ragu, lebih sederhana lebih baik . Tetap berpegang pada beberapa bobot dasar dan gaya font, dan jangan takut untuk bereksperimen. Pertama, Anda perlu memutuskan pesan seperti apa yang ingin Anda sampaikan kepada pengunjung Anda. Jika Anda ingin teks Anda serius dan profesional, maka Anda akan ingin menggunakan font yang lebih berat. Jika Anda ingin teks Anda menyenangkan dan menyenangkan, Anda dapat menggunakan font yang lebih ringan.

5. Optimalkan pengiriman CSS Anda

Untuk mengoptimalkan pengiriman CSS Anda, Anda harus mengecilkan dan mengompres file CSS Anda . Meminimalkan CSS Anda berarti mengurangi ukuran file CSS Anda dengan menghapus spasi, komentar, dan kode lain yang tidak perlu. Mengompresi CSS Anda berarti mengurangi ukuran file CSS Anda dengan mengurangi ukuran file individual.

Salah satu cara untuk melakukannya adalah dengan menggunakan CDN untuk menghosting file CSS Anda. Alternatifnya, Anda dapat menyisipkan kode CSS Anda langsung ke file HTML Anda. Ini bisa menjadi opsi yang bagus jika Anda memiliki sedikit CSS untuk dikirimkan. Pendekatan apa pun yang Anda ambil, pastikan Anda menguji situs web Anda secara menyeluruh untuk memastikan tidak ada masalah pengiriman.

6. Gunakan huruf miring secukupnya

Miring terutama digunakan untuk menambahkan penekanan pada kata atau frasa atau untuk menunjukkan judul. Terlalu sering menggunakan miring dapat membuat tulisan Anda terlihat seperti Anda mencoba terlalu keras untuk menjadi dramatis atau menarik. Sementara penggunaan huruf miring yang berlebihan juga dapat membuat tulisan Anda terlihat berantakan. Namun, ketika digunakan dengan benar, mereka dapat menambahkan penekanan dan membantu memecah blok teks yang panjang .

7. Pertimbangkan untuk menggunakan pemuat font web

Jika Anda ingin meningkatkan kinerja font web Anda, pertimbangkan untuk menggunakan pemuat font web. Ini dapat membantu menghindari Flash of Invisible Text (FOIT) yang dapat terjadi saat font web tidak dimuat dengan benar. Pemuat font web memastikan meningkatkan waktu pemuatan font web Anda sambil menampilkannya dengan benar.

Alat sederhana ini dapat mengubah tampilan situs Anda secara dramatis, dan mudah digunakan. Cukup pilih font web yang ingin Anda gunakan, lalu tambahkan kode ke situs Anda. Pemuat font web akan mengurus sisanya, memastikan bahwa situs Anda terlihat terbaik.

8. Gunakan font-display: swap;

Font-display adalah properti CSS yang memberi tahu browser cara merender font yang belum dimuat. Nilai swap memberi tahu browser untuk merender font fallback terlebih dahulu, lalu menukarnya dengan Font Google jika sudah siap. Ini memastikan bahwa pengguna tidak melihat ruang kosong saat font sedang dimuat dan juga membantu meningkatkan kinerja dengan mengurangi jumlah permintaan HTTP yang diperlukan untuk memuat halaman. Chrome dan Safari telah mendukung properti ini sejak versi 60 dan 63.

9. Gabungkan beberapa font menjadi satu permintaan.

Ketika datang untuk menggunakan banyak font dalam desain web Anda, ada beberapa cara berbeda untuk melakukannya. Salah satu pendekatannya adalah dengan memasukkan beberapa file font ke dalam CSS Anda, masing-masing menunjuk ke keluarga font yang berbeda. Namun, hal ini sering mengakibatkan banyak permintaan HTTP tambahan, yang dapat menambah dan memperlambat waktu pemuatan halaman Anda.

Pendekatan lain adalah menggabungkan semua font yang ingin Anda gunakan ke dalam satu file menggunakan teknik yang disebut penyematan font. Ini dapat membantu mengurangi jumlah permintaan HTTP dan juga dapat membantu mempercepat waktu pemuatan halaman . Ada beberapa cara berbeda untuk menyematkan font, tetapi salah satu metode yang populer adalah menggunakan aturan @font-face CSS.

10. Gunakan CDN untuk font yang disajikan.

Banyak pengembang web memilih untuk menggunakan jaringan pengiriman konten (CDN) untuk menyajikan font mereka. CDN dapat membantu meningkatkan kinerja dengan menyimpan font Anda di server mereka, yang berarti bahwa pengunjung situs Anda akan memiliki waktu pemuatan yang lebih cepat. Ini bisa menjadi cara yang bagus untuk meningkatkan kinerja situs Anda, serta mengurangi jumlah bandwidth yang Anda gunakan.

Namun, ada beberapa hal yang perlu diingat saat menggunakan CDN untuk font Anda. Pertama, Anda harus memastikan bahwa CDN yang Anda pilih mendukung jenis font yang Anda gunakan. Kedua, Anda harus memastikan bahwa CDN yang Anda pilih menggunakan SSL untuk menyajikan font, karena banyak CDN hanya akan menyajikan font melalui HTTPS.

Ketiga, Anda harus memastikan bahwa desain situs Anda tidak akan terpengaruh oleh penggunaan font yang berbeda. Ada sejumlah CDN berbeda yang menawarkan penyajian font, jadi pastikan Anda melakukan riset untuk menemukan CDN yang paling sesuai dengan kebutuhan Anda. Setelah Anda menemukan CDN yang Anda sukai, cukup unggah font Anda ke server mereka.

Dengan mengikuti tip sederhana ini, Anda dapat memastikan bahwa situs web Anda memuat dengan cepat dan efisien dan Google Font terlihat bagus di semua perangkat! Jadi lanjutkan – optimalkan!

Kesimpulan

Google Fonts adalah sumber daya yang luar biasa, memungkinkan Anda dengan mudah menambahkan kepribadian dan gaya ke situs web Anda tanpa menghabiskan banyak uang. Dengan mengoptimalkan font yang digunakan di situs WordPress Anda, Anda dapat memastikan bahwa pengunjung Anda memiliki pengalaman pengguna yang luar biasa sekaligus meningkatkan kinerja situs web Anda.

Apakah tujuan Anda adalah membuat situs Anda terlihat lebih ramping dan profesional atau hanya menambahkan beberapa gaya, membiasakan diri dengan kekuatan kustomisasi font dapat membuat situs web Anda dari rata-rata menjadi luar biasa. Dengan pengaturan yang tepat, beberapa perubahan di sana-sini pada font, ukuran, dan kerning benar-benar dapat membuat perbedaan ketika membuat dampak bagi pengunjung.

Selain itu, selain tips untuk mengoptimalkan font Google di WordPress, kami membahas bagaimana kami dapat menambahkan Google ke WordPress dengan menggunakan plugin Google Fonts Typography .

Kami harap artikel ini membantu Anda memahami cara mengoptimalkan Google Font di WordPress. Jika ya, maka Anda dapat mendukung kami dengan membagikan postingan ini di media sosial Anda.

Sementara itu, kami ingin Anda melihat posting blog terkait lainnya untuk meningkatkan situs web WordPress Anda.

• Cara Mengidentifikasi Font dari Situs Web

• Plugin Pengoptimalan Kecepatan WordPress Terbaik

• 11 Cara Meningkatkan Performa WordPress