Menampilkan Google Fonts di Halaman Web Secara Offline, Download Font Save Lokal Server Maupun Secara Online Link ke Google

Menampilkan Google Fonts di Halaman Web Secara Offline, Download Font Save Lokal Server Maupun Secara Online Link ke Google sekarang sudah semakin sering dipakai oleh para pembuat web. Baik Web Designer ataupun Programmer Web sering menggunakan Font bawaan sendiri ketika membuat halaman web, untuk lebih praktis mereka memakai Font dari Google. Kadang kala kita mendapati web yang mempunyai Font bagus dari Google Font agak lama loading karena harus menunggu data Font dari GoogleFonts. Oleh sebab itu pada artikel ini coba kita pelajari cara menggunakan Google Font dengan dua cara. Cara pertama yaitu link langsung secara online ke Google dan cara kedua yaitu Font tersebut didownload dan diletakkan di Server kita atau di lokal agar lebih cepat.


Caranya, pertama kunjungi dahulu website Google Fonts disini. Kemudian silakan pilih dahulu Font yang diinginkan. Kemudian klik Add To Collection.

Kemudian setelah memilih salah satu Font, kemudian pada bagian bawah klik Use. Akan ditampilkan script HTML atau CSS untuk menampilkan Font tersebut di halaman web kita :

Select script html yang ada, kemudian klik kanan copy, paste di halaman web yang kita buat. Kemudian gunakan Font tersebut di bawahnya, misalnya dengan tag <span> dan css style="font-family: ...". Dalam hal ini penulis membuat halaman web dengan nama font-google-link-online.html, isinya sebagai berikut :

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<span style="font-family: 'Pacifico', cursive;">

Kemudian silakan dipanggil di Browser Web, hasilnya sebagai berikut :

Cara kedua yaitu mendownload Font dari Google Fonts kemudian menyimpan di Server Kita Sendiri atau di Komputer Lokal. Harap menjadi perhatian, penulis tidak bertanggung jawab jika cara ini dianggap Illegal oleh Google, coba dilihat License di GoogleFont, apakah boleh digunakan secara lokal atau harus selalu link secara online di Google. Yang jelas melanggar hak cipta adalah jika anda mengaku font tersebut adalah buatan anda sendiri padahal tidak :D. Penulis tidak bertanggung jawab terhadap resiko menggunakan cara ini.

Pertama kita pilih dahulu Font yang ada di Web Google Fonts, dalam hal ini penulis memilih Font "Ubuntu" sebagai berikut, kemudian klik Tombol Use di bagian bawah kanan halaman :

Dari script HTML di atas kelihatan ada link menuju file CSS sebagai berikut :

http://fonts.googleapis.com/css?family=Ubuntu

Kemudian copy, paste link tersebut di Browser Web maka akan keluar CSS sebagai berikut :

Kelihatan ada link lagi menuju file Font *.woff sebagai berikut :

http://themes.googleusercontent.com/static/fonts/ubuntu/v5/_xyN3apAT_yRRDeqB3sPRg.woff

Silakan copy, paste lagi link tersebut di Browser Web. Kemudian download file Font *.,woff nya dan letakkan, simpan satu direktori dengan web page yang mau dibuat.

Setelah itu silakan buat file css dengan mengkopi CSS dari Google tetapi dimodifikasi agar link mengarah ke File Font *.woff lokal yang sudah kita download, dalam hal ini penulis membuat file dengan nama google-fonts-ubuntu.css, seperti ini :

<link href='google-fonts-ubuntu.css' rel='stylesheet' type='text/css'> <span style="font-family: 'Ubuntu', sans-serif;">http://mapjogja.com</span>

Hasilnya cukup bagus dan akses Font Google menjadi lebih cepat :

Project silakan anda download disini. Jika bingung caranya download, silakan lihat caranya disini.

Selamat Mencoba, semoga berhasil ^_^.