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.
Salin kode diatas, lalu paste pada kode HTML di bawah tag
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
Perhatikan kode CSS pada berkas
Sekarang buat sub direktori sourcesanspro (sebagai contoh), lalu buka satu persatu alamat font yang ada pada berkas
Contoh hasilnya adalah sebagai berikut.
Lakukan hal yang sama untuk semua alamat yang ada di dalam berkas
Sebelum:
Demikianlah postingan mengenai cara memasang Google Fonts secara offline. Bilamana ada yang kurang mohon dikoreksi.
Thanks.
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.
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.
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. |
| Membuka alamat font |
Contoh hasilnya adalah sebagai berikut.
 |
| 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.woff2Sesudah:
http://localhost/wadagizig/assets/sourcesanspro/ODelI1aHBYDBqgeIAH2zlAC5S7WFEeHRqL6ObGQGT8o.woff2Selesai, 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.
