Google font merupakan layanan pada google yang menyediakan berbagai macam jenis font gratis untuk keperluan desain web yang menarik. Jenis font yang disediakan mulai dari family (keluarga) serif, sans-serif, cursive, dan monospace sampai fantasy dengan berbagai variasi dan bentuk font yang unik. Saat ini terdapat 1600 buah font lebih dari berbagai jenis family yang dapat dipilih dan digunakan secara gratis.
Selain itu, google font juga memiliki kelebihan lain yaitu dapat digunakan secara online maupun offline. Secara online yaitu hanya dengan menyertakan link dari google font, maka tulisan dengan gaya dari font tersebut dapat ditampilkan secara langsung tanpa harus mendownloadnya. Secara offline artinya google font dapat didownload dan digunakan sewaktu-waktu tanpa harus ada jaringan internet. Caranya dengan menginstall font tersebut pada sistem secara lokal maupun digunakan langsung dengan metode font external (@font-face).
Untuk mengakses layanan google font cukup mudah yaitu dengan masuk pada situs https://www.fonts.google.com. Pada halaman tersebut akan ditampilkan berbagai jenis font dengan deskripsi nama font, penciptanya, jumlah style, beserta tampilan visual font tersebut.
Anda dapat memilih jenis font yang anda sukai dengan menggulung layar ke bawah. Anda juga dapat memilih jenis font dengan kategori berdasarkan nama keluarganya. Misalnya jika keluarga monospace, maka seluruh font dari keluarga monospace tersebut akan ditampilkan semuanya.
Setelah menentukan jenis font yang akan dipilih, silahkan klik font tersebut untuk menuju halaman detailnya. Pada halaman detail font, terdapat nama font dan preview tampilan visualnya. Untuk merubah tulisan pada preview, dapat menggunakan bilah input "Type here to input text".
Untuk dapat menggunakan font tersebut secara offline, anda dapat mendownloadnya font tersebut secara langsung. Caranya dengan mengklik tombol Download Family. Hasil download berupa file Zip berisi google font tersebut disertai file lisensi font dalam bentuk file text.
Pada penggunaan secara langsung (online), dapat melakukannya dengan cara memilih + Select this style. Dan silahkan tunggu tahapan berikutnya.
Setelah itu, sejenis keranjang belanja akan muncul dengan spesifikasi font yang dipilih. Google font akan memberikan pilihan dalam bentuk tag HTML <link> untuk dapat ditempelkan pada halaman body HTML. Dan pilihan @import, jika ingin menempelkannya pada halaman style sheet CSS.
Anda dapat memilih jenis font lebih dari satu dengan cara yang sama yaitu memilih + Select this style dan keranjang akan muncul dengan isi link dan spesifikasi yang berbeda.
Penggunaan google font pada halaman HTML akan meringankan beban desainer web dalam menata tampilan tulisan yang bagus dan menarik. Hal ini karena kemudahan yang ditawarkan dan pilihan jenis font yang cukup banyak. Dan font tersebut dapat dieksekusi dan ditampilkan secara langsung tanpa harus proses instalasi ataupun download. Yaitu cukup dengan meletakkan link google font pada halaman HTML.
Jika anda ingin menggunakan google font dalam bentuk tag HTML <link>, silahkan tempelkan elemen tag link tersebut pada halaman HTML di dalam tag <head>. Kemudian untuk merubah gaya teks pada elemen HTML dengan font yang sudah dipilih, dapat menggunakan properti font-family dengan nilai font dari google font.
Penerapan google font dalam bentuk elemen tag HTML <link> :
HTML
1
2
3
4
5
6
7
8
9
10
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<style>
div{
font-family: 'EB Garamond', serif;
}
</style>
</head>
Jika ingin menggunakan google font dan menempelkannya pada halaman style sheet CSS, anda dapat menggunakan perintah @import dengan property URL dari google font.
Penerapan google font dalam bentuk style sheet CSS :
CSS
1
2
3
4
5
6
<style>
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
div{
font-family: 'EB Garamond', cursive;
}
</style>
Sebagai contoh, saya akan menggunakan google font dengan nama "EB Garamond" dari keluarga serif. Berikut penggunaan google font pada halaman HTML :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>Google Font CSS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<style>
div{
font-family: 'EB Garamond', serif;
font-size:20px;
padding:5px;
border: solid 1px magenta;
margin:10px;
}
</style>
</head>
<body>
<h1>Google Font "EB Garamond"</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
</body>
</html>
Jenis font yang dipilih pada google font tidak dibatasi jumlahnya. Anda dapat menggunakan jenis font yang berbeda untuk keperluan yang berbeda. Misalnya untuk bagian judul menggunakan font jenis cursive dengan tulisan yang menyerupai tulisan tangan dan bagian deskripsi menggunakan font jenis san-serif dengan tulisan kaku dan tegak.
Pada contoh berikut menggunakan font "EB Garamond" dari keluarga serif dan font "Lobster" dari keluarga cursive. Contoh berikut menggunakan dua buah font dari google font :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>Google Font CSS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Lobster&display=swap" rel="stylesheet">
<style>
div{
font-size:20px;
padding:5px;
border: solid 1px magenta;
margin:10px;
}
</style>
</head>
<body>
<h1>Google Font "EB Garamond"</h1>
<div style="font-family: 'EB Garamond', serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<h1>Google Font "Lobster"</h1>
<div style="font-family: 'Lobster', cursive;">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Google font memiliki fitur tambahan berupa efek pada huruf yang akan memberikan gaya lebih unik. Efek tersebut misalnya teks diselimuti api (effect-fire), text emboss, text 3d, dan lainnya. Anda tidak perlu menggunakan penataan melalui CSS, karena efek tersebut sudah disediakan oleh google font.
Pemanggilan efek pada google font dilakukan dengan cara memanggil bersama link URL pada google font dilengkapi dengan efek dalam bentuk nilai nama API-nya. Penggunaan efek multiple ditulis dengan tanda "|" (pipe) sebagai pemisahnya. Kemudian melengkapi elemen HTML yang akan diberi efek dengan menambahkan atribut class dan diisi nama class API-nya.
HTML
1
2
3
4
/* link url dengan nama API effect*/
<link href='http://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple|neon|fire|fire-animation|outline|3d|3d-float' rel='stylesheet' type='text/css'>
/* memberi nama class name = misal: class="font-effect-shadow-multiple"*/
<div class="font-effect-shadow-multiple">Font Dengan Effect</div>
Berikut contoh menggunakan efek pada google font :
HTML
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
<!DOCTYPE html>
<html>
<head>
<title>Google Font CSS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href='http://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple|neon|fire|fire-animation|outline|3d|3d-float' rel='stylesheet' type='text/css'>
<style>
body{
background-color:#999;
}
.wadah p{
font-family: 'Lobster', cursive;
color: firebrick;
font-size:40px;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<div class="wadah">
<p class="font-effect-shadow-multiple">Effect Shadow Multiple</p>
<p class="font-effect-neon">Effect Nyala Neon</p>
<p class="font-effect-fire">Effect APi</p>
<p class="font-effect-fire-animation">Effect Animasi Api</p>
<p class="font-effect-outline">Effect Outline</p>
<p class="font-effect-3d">Effect Tiga Dimensi</p>
<p class="font-effect-3d-float">Effec Tiga Dimensi Float</p>
</div>
</body>
</html>
Hasil Script :
Effect Shadow Multiple
Effect Nyala Neon
Effect APi
Effect Animasi Api
Effect Outline
Effect Tiga Dimensi
Effec Tiga Dimensi Float
Silahkan kunjungi Google Font Effect untuk melihat efek yang lainnya serta tingkat dukungannya terhadap browser modern.
Halaman Terkait
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
