Cara Terbaru Memasang Google Fonts Di Blog

Cara Memasang Google Fonts Di Blog

Cara Memasang Google Fonts Di Blog - Kalau kamu merasa bosan dengan font di blog kamu yang itu-itu saja, maka saatnya beralih untuk memakai font dari google, yaitu Google Fonts.

Saat ini Google Fonts memiliki sekitar 819 font (kedepannya akan terus bertambah) yang bebas kamu pakai di blog kamu secara gratis. Disana ada beberapa kategori font seperti Sans, Sans-Serif, Handwriting, Monospace, dan Display. Nah untuk pemasangannya ke dalam blog cukup mudah, dimana hanya ada beberapa langkah yang akan saya jelaskan di bawah ini.

Cara Memasang Google Fonts di Blog

Pertama, silahkan meluncur menuju google fonts yang beralamatkan https://fonts.google.com/. Kemudian pilihlah font yang kamu sukai dan dirasa cocok diterapkan ke dalam blog. Kamu bisa menyesuaikan tipe font yang kamu suka dengan memanfaatkan filter di sebelah kanan halaman google fonts.

Dalam tutorial ini, saya akan memakai font Raleway. Klik tanda plus (+) untuk mendapatkan kode font tersebut. Kemudian akan muncul sebuah tab kecil di bawah. Klik tanda min (-) untuk membuka drawer-nya.

Pada bagian Embed, kamu akan menemukan dua kode dari font tersebut. Sebelum memasangnya ke blog kamu bisa memilih jenis font dari font family tersebut dengan membuka tab Customize yang ada disamping Embed.

Cara Memasang Google Fonts Di Blog

Setelah itu copy kode yang saya tandai dalam gambar dibawah ini.

Cara Terbaru Memasang Google Fonts Di Blog

Jangan lupa untuk menambahkan tanda garis miring di belakang kode. Sehingga dari kode yang seperti ini:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
Menjadi seperti ini:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
Sebelum mulai masuk ke bagian penerapan font, silahkan backup template kamu terlebih dahulu untuk menghindari hal yang tidak diinginkan.

Kemudian masuk ke dasbor blogger dan pilih blog yang diinginkan. Selanjutnya pilih menu Template dan masuk ke Edit HTML. Lalu copy kode yang sudah diberi tanda garis miring dan pastekan dibawah atau sesudah tag <head>. Tag <head> biasanya berada di bagian paling atas, atau kamu bisa menekan tombol Ctrl + F untuk mempermudah pencarian. Kalau sudah, Simpan Template.
Cara Terbaru Memasang Google Fonts Di Blog

Nah, kamu sudah memasang kode standard ke dalam blog kamu. Sekarang kita akan coba mengganti font keseluruhan blog atau. Masih pada mode Edit HTML, tekan tombol Ctrl + F. Kemudian ketikkan font-family dan tekan enter. Setelah itu akan ada beberapa kode font-family yang muncul.

Cara Terbaru Memasang Google Fonts Di Blog

Sebelumnya copy dulu kode CSS yang ada di halaman google fonts tadi.

Cara Memasang Google Fonts Di Blog
Contoh:
font-family: 'Raleway', sans-serif;
Kembali ke halaman Edit HTML, hapus satu persatu kode font-family bawaan template dan replace dengan kode diatas. Ingat, yang perlu kamu hapus adalah kode semacam ini:
font-family: 'Roboto', sans-serif;
Setelah diganti, hasilnya akan seperti yang terlihat pada gambar.
Cara Memasang Google Fonts Di Blog

Terakhir Simpan Template. Kalau berhasil, font pada keseluruhan blog akan berubah menjadi font yang baru. Lihat perbedaannya pada gambar dibawah.

Cara Memasang Google Fonts Di Blog
Sebelum

Cara Memasang Google Fonts Di Blog
Sesudah


Kalau gagal, upload backup template kamu dan ikuti kembali tutorial ini dengan baik dan perhatikan langkah-langkahnya dengan teliti.
loading...
Share This :

Related Post

avatar

widih google font keren-keren font nya.. tapi cara di atas bisa di pasang di semua template kan?

delete 3/2/17
avatar

sangat menarik untuk dicoba di blog ane :D
btw thanks atas informasinya min sangat bermanfaat:)

delete 3/2/17
avatar

Sangat membantu sekali bagi yang masih awam. Apalagi blogger baru yang mungkin akan bosen dengan font itu itu aja, jadi mereka bisa mencoba tutorial yang satu ini

delete 3/2/17
avatar

Kalo font bahasa arab & aksara jawa apakah sudah ada di Google Font?

delete 4/2/17
avatar

makin keren ne blog klo cobain yang beginian
makasih gan infonya

delete 4/2/17
avatar

Sedikit rumit.. tapi patut dicoba.. cusss..

delete 4/2/17
avatar

wah keren nih fontnya, simple boleh dicoba nih

delete 4/2/17
avatar

Kalo sama font awesome sama font google bagusan mana?

delete 4/2/17
avatar

kalau saya paling suka sama sans-serif (y)

delete 4/2/17
avatar
Anonymous

Makasih min work.. caranya sih masih ga jauh beda ya sama google font versi dulu :D

delete 4/2/17
avatar
Bartolomeong person

Bisa gan.. asal diperhatiin baik-baik tiap langkahnya 8-)

delete 4/2/17
avatar
Bartolomeong person

Sama-sama dan semoga membantu :)

delete 4/2/17
avatar
Bartolomeong person

Bener tuh gan bisa jadi referensi kalo mau ganti font blog :D

delete 4/2/17
avatar
Bartolomeong person

Waduh kurang tau itu gan :-d kayanya mah gada :>)

delete 4/2/17
avatar
Bartolomeong person

Perlu diketahui kalau font awesome dan google font itu beda :) Font awesome itu bukan "font" melainkan vector icon gitu.. sedangkan google font itu isinya ya "font" :D

delete 4/2/17



sentiment_satisfied Emoticon