Kamis, Juli 12, 2012

Memakai Font yang tidak Tersedia di Blogspot dari Google Web Fonts

Penulis Day Milovich | Kamis, Juli 12, 2012 | 22.15.00 |



Banyak pertanyaan dari kawan-kawan, bagaimana cara menggunakan font seperti di blog saya, padahal font itu tidak ada di pilihan template blogspot. Saya menggunakan font Signika dari Google Web Fonts.

Memakai Font yang tidak Tersedia di Blogspot dari Google Web Fonts

1. Masuk dashboard blogger dengan username/email dan password
2. Design > Edit HTML > Download Full Template
3. Buka Google Web Font, koleksi font bebas-pakai

Google Web Fonts:
http://www.google.com/webfonts/
4. Misalnya memilih font "Signika" seperti yang saya pakai di blog saya.

Demo :
http://daymilovich.blogspot.com

5. klik Add to Collection untuk memasukkan font ke koleksi
6. klik Use untuk menggunakan font Signika
7. "Choose the styles you want:" > klik mana yang dibutuhkan.
Saya klik semua, kecuali yang paling atas.
Pilihan saya adalah:
Normal 400, Semi-Bold 600, dan Bold 700
8. Pada "Add this code to your website:" ada code begini:
---
<link href='http://fonts.googleapis.com/css?family=Signika:400,600,700' rel='stylesheet' type='text/css'>
---
9. Buka template blogspot, lalu masukkan code tadi, sebelum <b:skin><![CDATA[/*
Susunannya menjadi begini:
---
<link href='http://fonts.googleapis.com/css?family=Signika:400,600,700' rel='stylesheet' type='text/css'>
<b:skin><![CDATA[/*
---
10. Sekarang, pakailah font ini untuk template blogspot.
Cari kata "font" di template.
Anda akan menemukan code semacam ini:
---
font-weight: bold;
font-family: Arial, Helvetica;
font-size:16px;
font-decoration: none;
---
Itu cara penulisan font di style .css yang sangat kuno.
Code di atas berarti: menggunakan font Arial, bold, ukuran 16px, dan tidak italic/underline.
Penulisan seperti cara di atas, sudah ketinggalan zaman.
Anda cukup menuliskan sebaris begini:
---
font: normal 400 13px Signika,sans-serif;
---
Artinya: font tanpa decoration, ukuran 13px, bernama Signika.
Kalau mau font bold dari Signika, penulisannya begini:
---
font: normal 700 21px Signika,sans-serif;
---
Itu artinya: tebal, ukuran 21 pixel, namanya Signika *) font pilihan kita.
---
Harap diingat: 400 berarti font normal (normal adalah tanpa italic ataupun bold) sedangkan 600 semi-bold, 700 untuk bold.
Silakan cari "font" di tempate Anda lalu ganti dengan font pilihan sendiri yang sudah didapatkan dari Google Web Fonts. Anda boleh menggunakan font tambahan. Pastikan font itu bagus, sudah diamati ukurannya, dan tidak membuat loading web atau blog menjadi lambat. Cara ini bisa diterapkan di website biasa, tidak hanya blog.
Silakan dicoba.
---
Google Web Fonts:
http://www.google.com/webfonts/
:)

1 komentar:

Anda bisa berkomentar tanpa perlu login.

 
Day Milovich (c) 2013. Diberdayakan oleh Blogger.