Para desainer web dan pengembang web banyak yang menggunakan Google Fonts untuk diterapkan pada websitenya. Dan pemilihan font harus sesuai dengan desain web itu sendiri sehingga memberikan tampilan website yang lebih menarik dan enak dipandang mata. Oleh karena itu, sebuah website dengan menggunakan font yang lebih indah, mudah dibaca, mudah diakses dan terbuka akan menjadikan sebuah ketertarikan tersendiri pada audien yang berkunjung pada web Anda.
Google memberikan layanan gratis bagi Anda untuk menggunakan font yang telah disediakan. Anda bisa mengaksesnya di Google Fonts. Sehingga memberikan keleluasan bagi para desainer web dan pengembang web begitu pula Anda yang ingin menggunakan Google Fonts pada sebuah website. Google Fonts pun memberikan pilihan web font dengan disesuaikan dengan kategori, karakter dan style.
Kategori Font
Ada beberapa kategori font yang terdapat pada Google Fonts:
- Serif
- San Serif
- Display
- Handwriting
- Monoscape
Karakter Font
Jenis karakter font yang digunakan pada Google Fonts:
- Cyrillic
- Cyrillic Extended
- Devanagari
- Greek
- Greek Extended
- Khmer
- Latin
- Latin Extended
- Vietnamese
Style Font
Untuk jenis style font yang anda bisa pilih di Google Fonts:
- Thin
- Light
- Normal
- Medium
- Italic
- Bold
- Semi-Bold
- Extra-Bold
- Ultra-Bold
Berikut ini adalah langkah-langkah cara menggunakan Google Fonts yang akan diterapkan pada website Anda:
1. Kunjungi laman Google Fonts di https://www.google.com/fonts .
Pilih tampilan tab sesuai selera Anda berdasarkan Word, Sentence, Paragraph atau Poster.
2. Pilih Family Google Fonts yang Anda inginkan.
Kita ambil contoh Font Family Open Sans.
Pilih Quick Use yang diberi kotak merah
3. Pilih jenis style yang Anda inginkan.
Kita ambil contoh jenis style Normal 400 untuk digunakan pada web Anda.
4. Pilih set karakter font yang Anda inginkan.
Untuk pilihan ini tetap biarkan pada posisi default Latin.
5. Tambahkan kode berikut ini pada website Anda.
Untuk menerapkan Google Fonts yang telah dipilih ke halaman web Anda, salin kode sebagai elemen pertama dalam dokumen HTML Anda. Lihat gambar di atas.
[code]<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>[/code]
Atau menggunakan @import ditempatkan pada file stylesheet di bagian awal.
[code]@import url(http://fonts.googleapis.com/css?family=Open+Sans);[/code]
Bisa juga dengan menggunakan JavaScript simpan dalam <head> dokumen HTML
[code]<script type="text/javascript">
WebFontConfig = {
google: { families: [ ‘Open+Sans::latin’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})();
</script>[/code]
6. Integrasikan Fonts kedalam CSS Anda.
Google Fonts yang telah anda atur sebelumnya masukkan pada style CSS Anda sama halnya dengan font yang lain. Seperti contoh berikut ini:
[code]h1 {
font-family: ‘Open Sans’, sans-serif;
}[/code]
Leave a Reply