Cara menggunakan Web Fonts

Cara membuat blog lebih kreatif adalah incaran semua blogger, agar pengunjung lebih bertahan lebih lama, disamping dengan memasang jam, silahkan baca panduan memasukkan jam dinding ke dalam blog. anda juga bisa menggunakan cara ini, yaitu mengganti model huruf, biar kelihatan paling beda degnan blog lain. tentu hal ini tidak menambah ranking blog naik atau lebih berseo hanya aksesori belaka. Tapi tentu kelihatannya akan lebih keren Lho.

Dalam template blogspot, google web fonts otomatis dapat di load melalui Rancangan (Design)→“Perancang Template” Untuk dapat menggunakan fitur ini, template blog Anda harus memiliki elemen variable definitions, contoh:

   <Variable name="bodyfont" description="Body Text Font"
type="font" default="normal normal 80% Georgia, Serif" 

value="normal normal 80% Georgia, Serif">
<Variable name="outerfont" description="Outer Text Font"
type="font" default="normal normal 100% Georgia, Serif" 

value="normal normal 100% Georgia, Serif">

Bagaimana jika tanpa variable definitions?
Silakan kunjungi WebFont Loader di Google Font API (Application Programming Interface) untuk mengetahui keterangan selengkapnya. Selanjutnya, masukkan script berikut di atas </head>.

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tangerine', 'Cantarell' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

Ganti kode script yang berwarna merah dengan google web fonts yang Anda gunakan.

Kemudian tambahkan CSS (Cascading Style Sheet) seperti yang tampak di bawah ini, bermanfaat apabila koneksi sedang ‘lemot’. Letakkan di atas ]]></b:skin>.

      .wf-loading p {
font-family: serif;
}
.wf-inactive p {
font-family: serif;
}
.wf-active p {
font-family: 'Tangerine', serif;
}
.wf-loading p {
font-family: serif;
font-size: 16px;
}
.wf-inactive h1 {
font-family: serif;
font-size: 16px;
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px;
}

1. Ganti kode yang berwarna merah dengan google web fonts yang Anda gunakan.
2. Jika script tidak aktif (koneksi ‘lemot’) maka akan ditampilkan font ‘serif’ dengan ukuran 16px.

Anda pun dapat mengganti nilai dari CSS tersebut, sesuai dengan keinginan Anda.