Cara Menggunakan Google Font API di Localhost
Saya yakin, ada pasti telah mengenal dengan link fonts.googleapis.com. Ya, link tersebut adalah fungsinya sebagai pemuatan font eksternal dari google font API. Saat ini google telah menyediakan lebih dari 700 jenis font family dibawah lisensi creative commons yang dapat digunakan secara gratis untuk pemilik website atau blog.
Pada website atau blog yang menggunakan salah atu font Google maka browser akan mencoba mendownload font yang diperlukan dari server Google. Google Fonts API ini dikirimkan melalui permintaan halaman tag CSS pada web kita.
Pada artikel kali ini saya tidak membahas dampak terhadap penggunaan font google API terhadap situs atau blog, namun saya akan membahas penggunaannya yang di host pada server local (localhost).
Mungkin saya perjelas seperti ini, bahwa tips ini diperuntukan bagi pengguna server localhost, intranet atau bisa juga digunakan ke host server lain.
Apa itu Localhost dan Intranet ?
Baiklah, kita bahas dulu satu-persatu :
Localhost yang dimaksud adalah server local pada masing-masing computer yang telah terinstall mesin server web, sehingga memungkinkan bisa menjalankan web/blog secara offline (tidak terhubung keinternet). Sebagai contoh seperti pada artikel saya yang berjudul Install Master Bootstrap Secara Offline. Bagi pengguna web berbasis wordpress cara ini tidak asing lagi, sedang mesin (aplikasi) yang digunakan paling populer adalah xamp atau wamp. (tutorial ini bisa dikatakan untuk pengguna cms wordpress).
Sedangkan Intranet adalah satu jaringan yang menggunakan protocol internet TCP/IP untuk berbagi informasi dalam lingkup local. Intranet juga bisa disebut suatu jaringan LAN (Local Area Network) yang hanya mencakup wilayah local/kecil, artinya juga tidak terhubung ke internet.
Apa hubungannya Google Font API dengan penggunaan diatas ?
Hubungannya adalah terhadap desain web/situs/blog yang kita bangun. Jika terkoneksi internet website kita terlihat sesuai dengan harapan namun bagaimana anda hanya menjalankan secara offline (localhost maupun intranet) tentu font yang akan digunakan tidak akan bisa terload.
Baiklah mari kita mulai, berikut langkah-langkah cara Menggunakan Google Font API di Localhost
Langkah #1 : Cari tahu font apa yang anda gunakan pada situs anda, biasanya tertera dan ditempatkan dibawah kode
Contoh diatas font family yang digunakan adalah Montserrat
Langkah #2 : Salin URL untuk mendownload font yang dibutuhkan, URLnya seperti ini :
lalu paste ke address pada pada browser, dan semestinya menampilkan mirip file CSS seperti dibawah ini :
Langkah #3 : Sekarang kita siap untuk mendownload file kita butuhkan yaitu file
Sekarang kita telah memiliki 2 buah font-family yaitu :
zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2
IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2
Untuk menyederhanakan dan mudah dipahami, ubah nama file diatas menjadi.
zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2 menjadi Montserrat-Regular.woff2
IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2 menjadi Montserrat-Bold.woff2
Langkah #4 : Taruh 2 file tersebut di direktori web localhost anda, selanjutnya tinggal menambahkan kode pemanggilan font-family tersebut melalui CSS dengan penulisan seperti dibawah ini :
Sekarang penggunaan font pada website anda akan dapat terload dan ditampilkan tanpa harus terkoneksi internet.
Namun demikian cara ini pun dapat diterapkan penggunaannya bagi website/blog yang menggunakan hosting sendiri (self-hosting) secara luas, yang perlu diperhatikan adalah pastikan anda menghapus link tag eksternal google font API nya nanti.
Demikian artikel tentang bagaimana caranya host Google Font API di Localhost Offline, semoga mudah dipahami. Diskusi tetap terbuka via kotak komentar.
Pada website atau blog yang menggunakan salah atu font Google maka browser akan mencoba mendownload font yang diperlukan dari server Google. Google Fonts API ini dikirimkan melalui permintaan halaman tag CSS pada web kita.
Pada artikel kali ini saya tidak membahas dampak terhadap penggunaan font google API terhadap situs atau blog, namun saya akan membahas penggunaannya yang di host pada server local (localhost).
Mungkin saya perjelas seperti ini, bahwa tips ini diperuntukan bagi pengguna server localhost, intranet atau bisa juga digunakan ke host server lain.
Apa itu Localhost dan Intranet ?
Baiklah, kita bahas dulu satu-persatu :
Localhost yang dimaksud adalah server local pada masing-masing computer yang telah terinstall mesin server web, sehingga memungkinkan bisa menjalankan web/blog secara offline (tidak terhubung keinternet). Sebagai contoh seperti pada artikel saya yang berjudul Install Master Bootstrap Secara Offline. Bagi pengguna web berbasis wordpress cara ini tidak asing lagi, sedang mesin (aplikasi) yang digunakan paling populer adalah xamp atau wamp. (tutorial ini bisa dikatakan untuk pengguna cms wordpress).
Sedangkan Intranet adalah satu jaringan yang menggunakan protocol internet TCP/IP untuk berbagi informasi dalam lingkup local. Intranet juga bisa disebut suatu jaringan LAN (Local Area Network) yang hanya mencakup wilayah local/kecil, artinya juga tidak terhubung ke internet.
Apa hubungannya Google Font API dengan penggunaan diatas ?
Hubungannya adalah terhadap desain web/situs/blog yang kita bangun. Jika terkoneksi internet website kita terlihat sesuai dengan harapan namun bagaimana anda hanya menjalankan secara offline (localhost maupun intranet) tentu font yang akan digunakan tidak akan bisa terload.
Baiklah mari kita mulai, berikut langkah-langkah cara Menggunakan Google Font API di Localhost
Langkah #1 : Cari tahu font apa yang anda gunakan pada situs anda, biasanya tertera dan ditempatkan dibawah kode
<head> dan tertulis seperti dibawah ini : <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"></link>Contoh diatas font family yang digunakan adalah Montserrat
Langkah #2 : Salin URL untuk mendownload font yang dibutuhkan, URLnya seperti ini :
http://fonts.googleapis.com/css?family=Montserrat:400,700lalu paste ke address pada pada browser, dan semestinya menampilkan mirip file CSS seperti dibawah ini :
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v6/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}Langkah #3 : Sekarang kita siap untuk mendownload file kita butuhkan yaitu file
.woff2. Untuk melakukannya hanya menyalin 2 URL dibawah ini ke browser :http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2
http://fonts.gstatic.com/s/montserrat/v6/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2Sekarang kita telah memiliki 2 buah font-family yaitu :
zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2
IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2
Untuk menyederhanakan dan mudah dipahami, ubah nama file diatas menjadi.
zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2 menjadi Montserrat-Regular.woff2
IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2 menjadi Montserrat-Bold.woff2
Langkah #4 : Taruh 2 file tersebut di direktori web localhost anda, selanjutnya tinggal menambahkan kode pemanggilan font-family tersebut melalui CSS dengan penulisan seperti dibawah ini :
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/Montserrat/Montserrat-Regular.woff2') format('woff2'), url('../fonts/Montserrat/Montserrat-Regular.eot'), url('../fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), url('../fonts/Montserrat/Montserrat-Regular.svg#latolight') format('svg');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('../fonts/Montserrat/Montserrat-Bold.woff2') format('woff2'), url('../fonts/Montserrat/Montserrat-Bold.eot'), url('../fonts/Montserrat/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'), url('../fonts/Montserrat/Montserrat-Bold.svg#latolight') format('svg');}Sekarang penggunaan font pada website anda akan dapat terload dan ditampilkan tanpa harus terkoneksi internet.
Namun demikian cara ini pun dapat diterapkan penggunaannya bagi website/blog yang menggunakan hosting sendiri (self-hosting) secara luas, yang perlu diperhatikan adalah pastikan anda menghapus link tag eksternal google font API nya nanti.
Demikian artikel tentang bagaimana caranya host Google Font API di Localhost Offline, semoga mudah dipahami. Diskusi tetap terbuka via kotak komentar.
No comments