Berikut ini adalah penerapan praktis penggunaan Google Font API dengan WebFont Loader.
Sisipkan snippet berikut ini pada bagian head (sebelum tag </head>) atau pada akhir dokumen (sebelum tag </body>).
<script type="text/javascript">
WebFontConfig = {
google: { families: [ '<span style="color:#f00;">Tangerine</span>', '<span style="color:#f00;">Cantarell</span<' ] }
};
(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>
Untuk memilih font, ganti tulisan berwarna merah dengan font yang diperlukan. Kita bisa menggunakan 2 font atau lebih sekaligus. Perhatikan, penggunaan lebih dari 1 font dipisahkan dengan tanda koma.
Kita bisa mengatur tampilan halaman saat font sedang dimuat, saat font tidak aktif, dan saat font aktif sehingga bisa mereduksi efek tampilan teks saat font sedang dimuat (FOUT — flash of unstyled text). Hal ini akan membuat proses loading halaman akan terlihat lebih baik, terutama pada saat koneksi lemot. Caranya, sisipkan kode CSS seperti pada contoh berikut ini :
.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 }
Kita juga bisa menggunakan Google’s AJAX APIs. Berikut ini snippetnya:
<script type="text/javascript" src="https://www.google.com/jsapi?key=<span style="color:#f00;">API-KEY</span>"></script>
<script type="text/javascript">
google.load("webfont", "1");
google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}});
}); </script>
Ganti API-KEY dengan kode API yang anda miliki. Jika belum punya bisa mendaftar di sini. Selamat mencoba.