Pada website, dapat menggunakan Google Fonts untuk membantu tulisan / text pada situs web menjadi lebih menarik dengan Google Fonts buatan Google yang telah dipilih. Tapi secara defaultnya ketika menyalin code yang ada di Google Fonts itu hanya berfungsi ketika online saja alias terhubung internet. Tapi tutorial ini juga dapat digunakan untuk jenis fonts lainnya tidak hanya Google Fonts saja.

Silahkan download Google Fonts yang ingin digunakan di situs Google Fonts.

Cara Download Google Fonts

• Kunjungi situs Google Fonts
• Pilih / Klik Fonts yang ingin digunakan
• Klik tanda tambah (+) Select This Font
• Fonts yang dipilih akan muncul di tab bawah layar, silahkan di buka
• Klik Download pada ujung layar kanan atas tab munculan, maka fonts berhasil diunduh

Pindahkan fonts ke file dimana file HTML kalian diletakkan.

Kemudian panggil pada file CSS nya seperti ini:

@font-face {
	font-family: 'Lobster-Regular';
	src: url('../fonts/Lobster-Regular.ttf');
	src: url('../fonts/Lobster-Regular.ttf') format('ttf'),
	     url('../fonts/Lobster-Regular.ttf') format('truetype');
}

Disini saya contohkan dengan Lobster Regular, silahkan ganti ‘Lobster-Regular’ dengan nama file font yang tadi diunduh dari Google Fonts dan bagian ini pasti sama dengan pemanggilan file seperti ‘../fonts/Lobster-Regular.ttf‘.

Saya tulis beberapa 3 source seperti itu karena masing-masing browser memiliki tanggapan yang berbeda untuk fonts offline makanya saya masukkan semua tipe pemanggilan seperti itu tapi tetap file nya sama.

Selanjutnya, panggil fonts yang telah dibuat font-face nya pada tempat / teks yang ingin menggunakan google fonts tersebut misalnya seperti ini:

.nav-lg li a {
	text-decoration: none;
	color: #fff;
	float: left;
	width: 100px;
	text-align: center;
	display: block;
	line-height: 70px;
	font-size: 20px;
	font-family: 'Lobster-Regular', 'san-serif';
	text-shadow: 1px 2px 2px #333;
}

Save dan periksa situs kalian pasti sudah berhasil mengganti jenis font nya. Sedangkan ‘san-serif‘ disitu hanya tambahan sebagai cadangan jika browser tidak mampu membaca Lobster-Regular maka akan membaca san-serif.

Selesai, sekarang kalian dapat menggunakan font tersebut secara offline misalnya untuk keperluan pengeditan di komputer yang tidak terhubung internet.

Masih bingung ? Lihat : Video tutorial cara menggunakan Google Fonts localhost Tanpa Jaringan.

Catatan: Cara ini hanya dapat menggunakan masing-masing 1 jenis google fonts saja, jika ingin menggunakan lebih dari 1 silahkan buat font-face baru lagi dengan nama fonts yang berbeda.

Selamat mencoba !