Memasang Google Fonts Secara Offline (Local)


Google Fonts merupakan salah satu produk font milik Google yang banyak digunakan untuk proses pengembangan aplikasi terutama aplikasi web. Dengan tampilannya yang cukup beragam serta kemudahan untuk mengaksesnya, maka tak jarang hampir di semua template yang tersedia di internet baik itu gratis ataupun berbayar, menggunakan Google Fonts ini sebagai font bawaan mereka.

Penggunaannya cukup mudah, silahkan kunjungi situs web nya disini, lalu pilih jenis font yang sesuai dengan selera kita. Setelah terpilih klik pada opsi "1 Family Selected". Angka 1 disini bisa berbeda tergantung dari berapa jenis font yang kita pilih, pada tulisan ini Saya hanya memilih satu jenis font saja. Untuk lebih jelas, silahkan lihat gambar dibawah ini.

Memasang Google Fonts Secara Offline (Local)

Salin kode diatas, lalu paste pada kode HTML di bawah tag <head> sesuai petunjuk pada gambar. Namun belum selesai pada tahap ini, mengapa? Karena disini kita masih membutuhkan koneksi internet (online) untuk dapat menggunakannya. Lalu bagaimana untuk membuatnya offline biar bisa dipakai di localhost misalnya?

Caranya sederhana, pada contoh diatas Kita bisa melihat alamat font tersebut yaitu: https://fonts.googleapis.com/css?family=Source+Sans+Pro. Buka alamat tersebut, salin kode CSS nya pada teks editor dan simpan pada direktori proyek lokal dengan nama font.css misalnya: ~/Public/html/wadagizig/assets/font.css, silahkan disesuaikan direktori proyeknya.

Perhatikan kode CSS pada berkas font.css yang baru kita simpan tadi.

Memasang Google Fonts Secara Offline (Local)

Sekarang buat sub direktori sourcesanspro (sebagai contoh), lalu buka satu persatu alamat font yang ada pada berkas font.css di atas dan simpan di dalam sub direktori sourcesanspro yang kita buat tadi.

Memasang Google Fonts Secara Offline (Local)
Membuka alamat font

Contoh hasilnya adalah sebagai berikut.

Memasang Google Fonts Secara Offline (Local)
Simpan secara lokal

Lakukan hal yang sama untuk semua alamat yang ada di dalam berkas font.css dan ganti semua alamatnya menjadi alamat lokal seperti dibawah ini.

Sebelum:
https://fonts.gstatic.com/s/sourcesanspro/v11/ODelI1aHBYDBqgeIAH2zlAC5S7WFEeHRqL6ObGQGT8o.woff2
Sesudah:
http://localhost/wadagizig/assets/sourcesanspro/ODelI1aHBYDBqgeIAH2zlAC5S7WFEeHRqL6ObGQGT8o.woff2
Selesai, sekarang kita sudah bisa mengaksesnya secara lokal alias tanpa koneksi internet.
Demikianlah postingan mengenai cara memasang Google Fonts secara offline. Bilamana ada yang kurang mohon dikoreksi.
Thanks.

No comments:

Post a Comment