Header Ads

Cara Menggunakan Google Font API di Localhost



Loading...
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.

Cara Menggunakan Google Font API di Localhost Offline


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,700

lalu 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.woff2

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 :

@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.

7 comments:

  1. Hmm, ini maksudnya ngeblogg di website tanpa terhubung jaringan internet gtu ya mas? wah saya baru tau..
    seperti lagi belajar di kelas, materi ini msh berat buat saya mas. heehe

    ReplyDelete
    Replies
    1. betul, kode diatas supaya font external google bisa terload, walaupun secara offline

      Delete
  2. Wah ada yang baru lagi mas, hmm jadi nambah lagi nih pengetahuan saya soal aplikasi yang baru dari mas, terima kasih mas sangat bermanfaat sekali.

    ReplyDelete
    Replies
    1. Iya kang, cara ini yang saya lakukan agar tampilan fonts tidak berantakan..

      Delete
  3. Pernah pelatihan buat web localhost ini mas, namun masih gagal untuk menerapkan dan sampai kini belum coba lagi, makasih ilmunya mas.

    ReplyDelete
  4. saya dulu tidak pakai wordpress mas, tpi make jombla, kayalnya tidak jauh berbeda sama-sama buka pakai localhost

    ReplyDelete
  5. Iya mas, intinya cara diatas bagaimana kita bisa memaksimalkan google font secara offline.
    Sehingg apakah itu cms wp, jomla atau sekedar halaman statis biasa selama menggunakan cara2 diatas maka hasilnya font yg kita gunakan secara offline pasti akan terload..

    ReplyDelete

Powered by Blogger.