Menggunakan Google Fonts Local di GeneratePress

Menggunakan Google Fonts local (lokal) di WordPress memberikan dampak signifikan terhadap kecepatan situs. Salah satu faktornya adalah mengurangi “DNS lookups”.

Bagaimana cara melokalkan Google Fonts di theme GeneratePress?

Pengguna theme GeneratePress bisa mengaplikasikan cara berikut ini untuk memindahkan Google Fonts ke server hosting yang digunakan. Bisa digunakan oleh pengguna theme premium dan versi gratis.

Jika Anda tertarik untuk membeli dan menggunakan GeneratePress premium yang memiliki fitur lebih lengkap, Anda bisa membeli melalui kami dengan harga yang terjangkau. Klik gambar berikut untuk keterangan lebih lengkap.

Penting: Anda harus memiliki akses menuju panel hosting karena metode ini mengharuskan memasukkan kode ke functions.php.

Pengaturan Google Fonts Local

Unduh Google Fonts

Langkah pertama adalah mengunduh font yang akan digunakan. Kami menyarankan Anda mengunduh font di link berikut ini: google-webfonts-helper. Di situs ini juga akan disediakan kode css yang siap digunakan pada proses berikutnya.

• Saya akan menggunakan fonts Lato.
• Saya menyarankan “Select styles” yang regular.
• Setelah terunduh, silahkan “extract” dan nanti akan ada beberapa file fonts.

Unggah Fonts

Langkah selanjutnya mengunggah fonts. Silahkan menuju panel hosting Anda dan masukkan kode berikut di functions.php (setelah selesai mengunggah, nanti kode ini harus langsung dihapus).

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff']  = 'application/x-font-woff';
    $mimes['woff2'] = 'application/x-font-woff2';
    $mimes['ttf']   = 'application/x-font-ttf';
    $mimes['svg']   = 'image/svg+xml';
    $mimes['eot']   = 'application/vnd.ms-fontobject';

    return $mimes;
} );

• Buka menu Media > Tambah Baru.
• Unggah file fonts.

Kita akan menggunakan yang berekstensi .woff dan .woff2, klik file tersebut dan kemudian salin URL-nya.

Salin Link Fonts

Contoh link kami:

https://www.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.woff2

Potong link diatas menjadi seperti ini:

https://www.wpnesia.id/wp-content/uploads/2020/08/

Salin link tersebut dan lanjutkan ke langkah berikutnya.

Dapatkan Kode CSS

Langkah selanjutnya adalah menyalin kode CSS yang akan digunakan untuk menampilkan fonts.

• Kembali ke web google-webfonts-helper.
• Salin link yang tadi sudah Anda copy diatas.
• Masukkan link tersebut di kolom “Customize folder prefix (optional):”.

Salin kode CSS yang sudah disediakan seperti gambar diatas. Hasilnya seperti berikut:

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('https://www.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://ik.imagekit.io/wpnesia/wp-content/uploads/2020/08/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

• Penting: tambahkan kode > font-display: swap; seperti kode kami diatas.
• Salin kode CSS diatas di CSS Tambahan (harus di Tampilan -> Sesuaikan -> CSS Tambahan).
• Simpan.

Menambah Fonts di GeneratePress

Langkah terakhir adalah memunculkan pilihan fonts ini di menu customizer atau sesuaikan.

Masukkan kode ini di functions.php:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Lato';

    return $fonts;
} );

Nama fonts di $fonts[] = ‘Lato’; sesuaikan dengan fonts pilihan Anda.

Baca juga: Cara Menghilangkan Kolom URL di Komentar GeneratePress

Menerapkan Fonts

Langkah terakhir adalah menerapkan fonts.

• Masuk ke >Tampilan > Sesuaikan > Typography.
• Jika sukses, maka fonts pilihan akan muncul dibawah “System Fonts“.

Hingga langkah ini jika Anda menerapkan dengan benar maka seharusnya Google fonts local sudah bisa digunakan.

Bagaimana, apakah fonts pilihan Anda berhasil muncul dan diterapkan?