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.
No comments:
Post a Comment
Silahkan gunakan nama asli dalam berkomentar. Profil unknown / anonim tidak akan di-approve! Terima kasih.