Cara Install Google Font Ke Dalam Template - Tutorial Blog

Cara Install Google Font ke Template - Tutorial Blog

Font atau abjad yang dipakai pada sebuah laman web sangat menghipnotis tingkat ke popularan situs web tersebut, penggunaan jenis font dan besar kecil ukuran font yang kurang sempurna sanggup menciptakan minat pembaca hilang secara tiba-tiba. ideal nya ukuran font yang menciptakan nyaman pembaca ialah 15px hingga 16 px, sedangkan jenis font yang ideal untuk situs web/blog ialah open sans, arial reguler, raleway dan masih banyak lagi, namun pada dasarnya pilih lah font yang umum dan rapi, sehingga tidak mengejutkan mata pembaca.

Bagaimana cara mengganti jenis abjad (font) pada template blog?

Login ke blogger, klik template > klick tingkat lanjut, kau sanggup menentukan font header, font laman atau content yang sudah tersedia disitu. Namun saya tidak membahas itu lebih jauh alasannya ialah saya rasa semua paham kalau menentukan font dari pengaturan template. Tapi bagaimana kalau ternyata kita tidak menemukan jenis font yang sesuai dengan yang kita inginkan di pengaturan template, maka solusi nya kita sanggup memakai google font dengan cara menginstal nya di template blog kita. Ada banyak jenis-jenis font yang manis di google font, mungkin ratusan atau 300 jenis font bahkan mungkin lebih dari itu, saya tidak pernah menghitung nya.

Cara Memilih dan Mengambil Google Font

1. Kunjungi https://fonts.google.com untuk menentukan font
2. Setelah menemukan jenis font yang tepat, klick tanda +,
3. Setting sedikit panda jendela yang muncul menyerupai gambar di bawah ini.

Keterangan Gambar:

• Pada tab costumize pilih regular 400 dan bold 700, itu merupakan merupakan ukuran ketebalan font {font-weight: nilai_font;} yang paling umum, perhatikan juga indikator hijau pada gambar, itu merupakan tanda kondusif atau nilai kecepatan loading (pemuatan font) tersebut. kalau kita menentukan 3 ukuran ketebalan font misal 400,700, dan 800 maka indikator hijau biasanya berubah jadi kuning atau merah, memberi tanda bahwa menentukan 3 ukuran font akan menciptakan loading (pemuatan) font lebih berat.
• Tab-Embed, Copy kedua isyarat yang di berikan google font, simpan di notepad atau catatan untuk sementara.

Cara Memasang Google Font ke Template Blog

1. Login ke Dashboard Blogger > klick Template > Edit Html
2. Cari isyarat epilog tag-heading yaitu </head> dan pastekan isyarat google font sempurna di atas </head> lalu save template.
3. Lihat pola di bawah ini.

<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>

Catatan: proses pemasangan google font ini belum selesai, kalau pada dikala menyimpan template ternyata template kita tidak sanggup menyimpan isyarat google font tersebut, alasannya ialah format template berbeda dengan isyarat google font, maka ubahlah isyarat google font tersebut menjadi menyerupai berikut ini.

<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet'/>

Perhatikan perbedaan nya ada pada tanda kutip satu ' dan tanda kutip dua " dan bab ujung isyarat yaitu />.

Simpan kembali isyarat google font sempurna di atas tag </head>, kalau template tetap tidak sanggup menyimpan nya maka parse isyarat google font tersebut klik untuk memparse. script apapun kalau sudah di parse insya allah masuk ke template blog apapun.

Setelah isyarat tersebut disimpan di dalam area heading tag template, maka langkah selanjut-nya memasang css google font (kode yang kedua) yaitu (font-family: 'Raleway', sans-serif;).
Masukkan isyarat css google sempurna di atas kode ]]></b:skin> dengan format menyerupai di bawah ini.

p {
  font-family: 'Raleway', sans-serif;
}

Huruf "p" berarti paragraf, maka css di atas meminta "tampilkan semua paragaf text dengn font raleway". sedangkan fungsi sans-serif; ialah font cadangan, kalau jaringan internet sedang tidak manis maka font raleway akan di gantikan dengan sans-serif untuk pemuatan (loading) yang lebih singkat.

Selain dengan format menyerupai di atas, css google font juga sanggup di pasang dengan format menyerupai pola berikut ini.

.post-body {
  font-family: 'Raleway', sans-serif;
}

.post-body ialah id laman artikel, jadi semua yang di dalam laman artikel akan dimuat dengan tampilan abjad (font) raleway. Supaya artikel ini lebih panjang lagi, maka saya kasi pola lagi yaitu memasang css google font dengan format menyerupai berikut ini.

.post-body,.post-tittle,.popular-post {
  font-family: 'Raleway', sans-serif;
}

Css tersebut artinya meminta judul artikel, laman artikel, dan post popular di tampilkan dengan jenis abjad raleway.

Catatan Penting:
.post-body, .post-tittle, dan .popular-post merupakan "id" element yang umum pada template blogger, tapi kalau template anda tidak memakai "id" menyerupai itu, maka kau sanggup lakukan inspect element untuk mengetahui "id" setiap element template anda, awali dengan memberi tanda titik di belakang id dan pisahkan id dengan tanda koma, menyerupai terlihat pada pola css diatas, cukup sekian klarifikasi saya mengenai cara memasang google font ke template blogger.