Cara Menggunakan Google Font di Blogger

By Posted on

Insert Google Font di Blogger

Cara Menggunakan atau Memasukkan Google Font di Blogger – Google Font adalah kumpulan-kumpulan font yang dikelola oleh Google. Kita dapat menggunakan font tersebut secara gratis, baik dengan cara memasukkan link stylesheet maupun dengan cara download file font nya.

Pada kali saya akan membagikan cara bagaimana menambahkan google font ke Blogger dengan mudah.

Caranya adalah:
    • Cari font di Google Font, dalam kasus saya mencari font Open Sans
    • Setelah dapat, maka akan muncul list ukuran font yang akan digunakan, sebagai contoh saya pilih Open Sans Regular 400 (klik pada nomor 1)
    • Kemudian akan muncul link (pada nomor 2). Silahkan copy seluruh link tersebut.
    • Buka Blogger, masuk kedalam theme Edit HTML.
    • Paste kan link yang telah di copy kedalam <head></head>
    • Cari kata “font-family” didalam tag body {
    • Tambahkan nama font “Open Sans” didepan, sebagai contoh:
body {
    font-family: 'Open Sans', Roboto,Arial,sans-serif
}
  1. Lalu Klik Simpan.

Jika ada Error Yang Terjadi

A. Attribute name “crossorigin” associated with an element type “link” must be followed by the ‘ = ‘ character

Bagaimana cara mengatasinya?
1. Hilangkan kata crossorigin
atau
2. Tulis crossorigin=” “

B. The reference to entity “display” must end with the ‘;’ delimiter.

Bagaimana cara mengatasinya?

Misalnya error terjadi pada link :
https://fonts.googleapis.com/css2?family=Open+Sans&display=swap

Maka kita harus mengubah karakter “&” sebelum display menjadi “&amp;”. Sehingga menjadi:
https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap

C. The element type “link” must be terminated by the matching end-tag “</link>”

Bagaimana cara mengatasinya?

Tambahkan “/” sebelum “>”. Misalnya, baris programnya adalah: 

<link href='https://fonts.googleapis.com' rel='preconnect'>
<link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'>
<link href='https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap' rel='stylesheet'>

Maka ditambah “/” menjadi: 

<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap' rel='stylesheet'/>

Masalah selesai.

Semoga artikel ini bermanfaat.