Menggunakan Google Fonts Offline – HTML CSS


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 !


Jangan Lupa Share !!!

45
8 shares, 45 points

Apa Reaksimu ?

Bingung Bingung
9
Bingung
Kesal Kesal
7
Kesal
OMG OMG
9
OMG
Takut Takut
8
Takut
Keren Keren
7
Keren
Sedih Sedih
1
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki