Cara Menambahkan Google Web Font di WordPress Themes

3 6

Font Google adalah sumber gratis yang luar biasa untuk perancang web. Pada artikel ini, kami akan menunjukkan kepada kamu bagaimana cara menambahkan Google Web Font di tema WordPress kamu dengan cara yang BENAR, yang dioptimalkan untuk kinerja.

Temukan Font Web Google yang Kamu Suka

Hal pertama yang perlu kamu lakukan adalah menemukan font Google yang kamu sukai. Pergilah ke font Google dan jelajahi perpustakaan. Bila kamu menemukan font yang kamu sukai, klik tombol “Quick-use”.

Setelah kamu mengklik tombol quick-use, kamu akan dibawa ke halaman baru. Gulir ke bawah sampai kamu melihat kotak instruksi penggunaan dengan kode yang dapat kamu tambahkan ke situs web kamu.

Kamu akan melihat bahwa ada tiga tab berbeda untuk menambahkan font ke situs kamu. Yang pertama adalah metode standar dan yang disarankan untuk menambahkan font Google ke situs kamu. Tab kedua menggunakan metode @import CSS, dan tab terakhir menggunakan metode JavaScript.

Kami akan menunjukkan cara menggunakan masing-masing metode ini dan apa saja pro dan kontra.

Menambahkan Font Web Google di Tema WordPress

Kami kebanyakan melihat orang menggunakan dua metode pertama.

Cara termudah adalah dengan membuka file style.css theme kamu dan menempelkan kode font yang kamu dapatkan di tab @import, seperti ini:

@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald);

Kamu juga bisa menggabungkan beberapa permintaan font menjadi satu. Inilah cara kamu melakukannya:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Cara ini sangat mudah tapi bukan cara terbaik untuk menambahkan font Google ke situs WordPress kamu. Menggunakan metode @import memblokir download paralel, yang berarti browser akan menunggu file yang diimpor selesai diunduh sebelum mulai mendownload konten lainnya.

Jika kamu HARUS menggunakan @import, setidaknya setidaknya menggabungkan beberapa permintaan menjadi satu.

Metode Optimalisasi Kinerja Menambah Font Google Web

Cara terbaik untuk menambahkan font Google adalah dengan menggunakan metode Standar yang menggunakan metode tautan alih-alih metode impor. Cukup ambil URL font kamu yang kamu dapatkan dari langkah 1. Jika kamu menambahkan beberapa font, maka kamu bisa menggabungkan dua font dengan a | karakter. Kemudian letakkan kode di bagian kepala tema kamu.

Kamukemungkinan besar harus mengedit file header.php kamu, dan menempelkan kode berikut di atas stylesheet utama kamu. Contohnya akan terlihat seperti ini:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

Pada dasarnya tujuannya adalah untuk menempatkan permintaan font sedini mungkin. Menurut blog Google Web Fonts, jika ada tag script sebelum @ font-face declaration, maka Internet Explorer tidak akan merender apapun di halaman sampai file font selesai diunduh.

Setelah kamu melakukannya, kamu bisa mulai menggunakannya di file CSS tema kamu seperti ini:

h1 {
 font-family: 'Oswald', Helvetica, Arial, serif;
}

Kini ada banyak kerangka tema dan tema anak di luar sana. TIDAK dianjurkan untuk memodifikasi file tema induk kamu secara khusus jika kamu menggunakan kerangka tema karena perubahan kamu akan diganti saat kamu memperbarui kerangka itu lagi. Kamu perlu memanfaatkan kait dan filter yang disajikan kepada kamu oleh tema atau kerangka kerja orang tua tersebut untuk menambahkan font Google dengan benar pada tema anak kamu.

Font Google yang Tepat Enqueuing di WordPress

Cara lain untuk menambahkan font Google ke situs WordPress kamu adalah dengan enqueuing font di file functions.php tema kamu atau plugin khusus situs.

function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Jangan lupa ganti link font dengan milik kamu .

Memuat Google Fonts Menggunakan JavaScript

Untuk metode ini, kamu perlu menyalin kode di tab JavaScript di bagian petunjuk penggunaan font Google. Kamu dapat menempelkan kode ini ke file header.php tema atau tema anak kamu segera setelah tag.

Kiat terakhir kami tentang penggunaan Google Web Font di situs kamu adalah tidak memuat font yang tidak akan kamu gunakan. Misalnya, jika kamu hanya menginginkan bobot yang berani dan normal, maka jangan menambahkan semua gaya lainnya.

Kami berharap artikel ini membantu kamu menambahkan Google Web Font di tema WordPress kamu dengan cara yang benar, sehingga situs kamu dapat memuat dengan cepat. Kamu mungkin juga ingin melihat panduan tentang cara menambahkan font Typekit di WordPress.

Get real time updates directly on you device, subscribe now.

3 Comments
  1. […] ke situs web kamu dan menyajikannya langsung dari server Google. Lihat panduan kami tentang cara menambahkan font Google di tema WordPress untuk lebih […]

  2. deni oktaviano says

    thanks infonya sangat membantu

    1. Infokoding says

      terima kasih sudah berkunjung

Leave A Reply

Your email address will not be published.