Menggunakan Google Fonts Local di GeneratePress

Bagikan

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.

Beli GeneratePress Premium

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.

Google Fonts Local
Download Google Font yang akan digunakan
  • 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.
Google Fonts Local
Fonts terunggah di Media

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

Salin Link Fonts

Google Fonts Local

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.

Baca juga: Membuat Tombol Sosial Media Share di GeneratePress

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):”.
Google Fonts Local
Paste link fonts

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://cdn.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('https://cdn.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://cdn.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://cdn.wpnesia.id/wp-content/uploads/2020/08/lato-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://cdn.wpnesia.id/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 Custom CSS atau style.css (pilih salah satu).
  • 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 Menampilkan Tanggal Pembaruan Artikel di GeneratePress

Menerapkan Fonts

Langkah terakhir adalah menerapkan fonts.

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

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?

Tinggalkan komentar