Membuat
sebuah desain website akan hambar rasanya apabila font yang digunakan tidak
kita perhatikan desainnya, lalu bagaimana caranya agar font yang digunakan di desain web kita terlihat cantik? Ada beberapa
font memang yang menurut kami sudah tersedia secara default di HTML,
seperti Arial, Times New Roman, dan yang lain, namun tentunya setiap individu
memiliki selera masing-masing.
Di artikel yang akan kami bahas kali ini mungkin
membuat Anda tahu bagaimana cara menggunakan google font.
Google Font adalah salah satu layanan yang disediakan Google untuk
memudahkan web developer dalam menghasilkan desain yang menarik dengan
meyediakan font-font gratis. Fitur ini dapat anda akses pada alamat: https://www.google.com/fonts.
Tutorial Memilih Font dari Google Font
Untuk dapat menggunakan font yang disediakan oleh
google, langkah pertama adalah memilih font yang akan digunakan. Silahkan buka
situs Google
Font di alamat: https://www.google.com/fonts.
Di
dalam halaman awal, Anda akan langsung berhadapan dengan menu pencarian font.
Silahkan mencoba-coba fitur pencarian yang ada dan melihat-lihat kategori font
yang tersedia.
Jika telah menemukan font yang diiginkan,
klik tombol “Add to Collection”
pada font tersebut. Google akan menyimpan sementara font tersebut (mirip fitur
cart pada situs online shopping). Anda boleh mencari font lain atau langsung
menggunakan font tersebut. Dalam tutorial ini kami memilih untuk menggunakan 2
jenis font, yaitu Open-Sans dan Lobster.
Setelah Anda memilih satu atau dua (atau 10) font,
kemudian klik tombol “Use” yang berada di
pojok kanan bawah. Jendela web akan beralih menjadi gambar berikut:
Di
dalam jendela ini anda akan menemunkan 4 opsi untuk mengatur cara penggunaan
font.
Opsi pertama adalah
memilih jenis-jenis huruf untuk font. Apakah font yang anda ingin gunakan
mencakup tulisan tebal (bold), miring (italic), atau
keduanya (bold dan italic).
Opsi ke-dua adalah
memilih karakter-set. Jika Anda tidak membuat web yang akan menggunakan huruf
china atau jepang, biarkan pilihan ini sesuai dengan defaultnya (latin).
Opsi ke-empat adalah
petunjuk cara penggunaan font tersebut di dalam CSS. Anda dapat melihat bahwa
kita tinggal menggunakan property font-family dengan nama font yang telah
disediakan oleh google.
Sampai disini, Anda sudah bisa langsung menggunakan
font tersebut.
Tutorial Cara Menggunakan Google Font
Setelah memilih jenis
font dan cara yang akan digunakan, maka kita akan langsung mencobanya dengan
kode CSS. Berikut adalah kode HTML dan CSS yang ksmi gunakan:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <! DOCTYPE html> < html > < head > < title >Belajar Google Font</ title > < link href = 'http://fonts.googleapis.com/css?family=Lobster|Open+Sans' rel = 'stylesheet' type = 'text/css' > < style type = "text/css" > .open{ font-family: 'Open Sans', sans-serif; } .lobster{ font-family: 'Lobster', cursive; } </ style > </ head > < body > < h2 >Belajar Google Font</ h2 > < h3 >Font reguler:</ h3 > < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</ p > < h3 >Font Open Sans:</ h3 > < p class = "open" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</ p > < h3 >Font Lobster:</ h3 > < p class = "lobster" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</ p > </ body > </ html >
|
Social Icons