Google Web Fonts untuk Tampilan Blog

Published Friday, 26 April, 2013 · Updated Monday, 25 December, 2017

Bagi web developer yang ingin membuat tampilan website/blognya lebih menarik, bisa dengan cara menampilkan teks/tulisan menggunakan font cantik yang disediakan oleh Google. Google menyediakan beraneka jenis font yang menarik yang bisa dimanfaatkan secara gratis.

Caranya sangat mudah, silahkan buka http://www.google.com/fonts/ dan pilihlah jenis font yang disukai. Selanjutnya tempelkan pada CSS blog anda. Berikut langkah lengkapnya :

1. Setelah membuka URL di atas, pilihlah salah satu font yang menurut anda cantik. Dan klik Add to collection.

2. Selanjutnya klik ikon Quick use (ikon kecil disebelah kiri), maka jendela Quick Use: nama font akan tampil.

3. Gulung layar ke bawah, dan berhenti pada “Choose the character sets you want”. Berilah tanda centang untuk menambahkan style pada font yang telah dipilih.

4. Pada “Add this code to your website:”, copy-lah script di bawahnya dan paste-kan pada halaman HTML/PHP pada blok <HEAD>

5. Selanjutnya pada “Integrate the fonts into your CSS:” copy-lah code CSS di bawahnya dan paste-kan pada dokumen CSS anda. Misalnya, jika anda menginginkan teks yang tampil pada blog anda menggunakan jenis font yang sudah dipilih, maka sisipkan code CSS di atas pada bagian body. Seperti berikut:

body {
font-family: ‘Autour One’, cursive;
}

6. Selesai!

Note!

Ketika memilih jenis font, perhatikan gambar speedometer (page load) di sebelah kiri, untuk mengetahui berapa kecepatan browser dalam mengakses font tersebut. Pilihlah yang paling rendah angkanya.