Panduan ini menjelaskan cara menggunakan Google Fonts API untuk menambahkan font ke halaman web Anda. Anda tidak perlu melakukan pemrograman apa pun. Anda hanya perlu menambahkan link stylesheet khusus ke dokumen HTML Anda, kemudian merujuk ke font dengan gaya CSS.
Contoh singkat
Berikut contohnya. Salin dan tempel HTML berikut ke dalam file:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Kemudian, buka file di browser web modern. Anda akan melihat halaman yang menampilkan kode berikut, dalam font Tangerine:
Kalimat tersebut adalah teks biasa, jadi Anda bisa mengubah tampilannya menggunakan CSS. Coba tambahkan bayangan ke gaya di contoh sebelumnya:
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
Sekarang Anda akan melihat drop shadow di bawah teks:
Dan itu hanyalah awal dari apa yang dapat Anda lakukan dengan Fonts API dan CSS.
Ringkasan
Anda dapat mulai menggunakan Google Fonts API hanya dalam dua langkah:
Tambahkan link stylesheet untuk meminta font web yang diinginkan:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Menata gaya elemen dengan font web yang diminta, baik dalam stylesheet:
.css-selector { font-family: 'Font Name', serif; }atau dengan gaya inline pada elemen itu sendiri:
<div style="font-family: 'Font Name', serif;">Your text</div>
Untuk mengetahui daftar font yang dapat Anda gunakan, lihat Google Fonts.
Menentukan jenis dan gaya font di URL stylesheet
Untuk menentukan URL yang akan digunakan di link stylesheet, mulailah dengan URL dasar Google Fonts API:
https://fonts.googleapis.com/css
Kemudian, tambahkan parameter URL family=, dengan satu atau beberapa nama jenis dan
gaya font.
Misalnya, untuk meminta font Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
Untuk meminta beberapa jenis font, pisahkan nama dengan karakter pipa
(|).
Misalnya, untuk meminta font Tangerine, Inconsolata, dan Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Dengan meminta beberapa font, Anda dapat menggunakan semua font tersebut di halaman Anda. (Tapi jangan berlebihan; sebagian besar halaman tidak memerlukan banyak font, dan meminta banyak font dapat membuat halaman Anda lambat dimuat.)
Google Fonts API menyediakan versi reguler dari font yang diminta secara
default. Untuk meminta gaya atau bobot lain, tambahkan titik dua (:) pada nama
font, diikuti dengan daftar gaya atau ketebalan yang dipisahkan dengan koma (,).
Contoh:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Untuk mengetahui gaya dan ketebalan yang tersedia untuk font tertentu, lihat listingan font di Google Fonts.
Untuk setiap gaya yang diminta, Anda dapat memberikan nama lengkap atau singkatan; untuk bobot, Anda dapat menentukan bobot numerik:
| Gaya | Penentu |
|---|---|
| miring | italic atau i |
| tebal | bold atau b atau bobot numerik seperti 700 |
| tebal miring | bolditalic atau bi |
Misalnya, untuk meminta Cantarell italic dan Droid Serif tebal, Anda dapat menggunakan salah satu URL berikut:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Menggunakan tampilan font
font-display memungkinkan Anda
mengontrol apa yang terjadi saat font tidak tersedia. Menentukan nilai selain
auto default biasanya sesuai.
Teruskan nilai yang diinginkan dalam parameter display string kueri:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Menentukan subset skrip
Beberapa font di Google Font Directory mendukung beberapa skrip (misalnya, Latin, Cyrillic, dan Yunani). Untuk menentukan subset mana yang harus didownload, parameter subset harus ditambahkan ke URL.
Misalnya, untuk meminta subset Cyrillic dari font Roboto Mono, URL-nya adalah:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Untuk meminta subset bahasa Yunani dari font Roboto Mono, URL-nya adalah:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Untuk meminta subset bahasa Yunani dan Sirilik dari font Roboto Mono, URL-nya adalah:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
{i>Subset<i} Latin selalu disertakan jika tersedia dan tidak perlu ditentukan. Perlu diketahui bahwa jika browser klien mendukung rentang unicode (http://caniuse.com/#feat=font-unicode-range), parameter subset akan diabaikan; browser akan memilih dari subset yang didukung oleh font untuk mendapatkan apa yang dibutuhkan untuk merender teks.
Untuk daftar lengkap font dan subset font yang tersedia, lihat Google Fonts.
Mengoptimalkan permintaan font Anda
Sering kali, saat ingin menggunakan font web di situs web atau aplikasi, Anda sudah mengetahui huruf yang diperlukan. Hal ini sering terjadi ketika Anda menggunakan {i>font<i} web dalam logo atau {i>heading<i}.
Dalam kasus ini, sebaiknya tentukan nilai text= di URL
permintaan font Anda. Hal ini memungkinkan Google menampilkan file font yang dioptimalkan untuk permintaan
Anda. Dalam beberapa kasus, tindakan ini dapat mengurangi ukuran file font hingga 90%.
Untuk menggunakan fitur ini, cukup tambahkan text= ke permintaan Google Fonts API Anda. Misalnya, jika hanya menggunakan Inconsolata untuk judul blog, Anda dapat menempatkan judul itu sendiri sebagai nilai text=. Permintaan tersebut akan terlihat
seperti berikut:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Seperti semua string kueri, Anda harus mengenkode nilai ke URL:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Fitur ini juga berfungsi untuk font internasional, sehingga Anda dapat menentukan karakter UTF-8. Misalnya, “Hola!” direpresentasikan sebagai:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Mengaktifkan efek font (Beta)
Saat membuat header atau teks tampilan di situs, Anda sering kali ingin menyesuaikan gaya teks dengan cara yang dekoratif. Untuk menyederhanakan pekerjaan Anda, Google telah menyediakan koleksi efek font yang dapat digunakan dengan sedikit upaya untuk menghasilkan teks tampilan yang indah. Contoh:
Untuk menggunakan fitur beta ini, cukup tambahkan effect= ke permintaan Google Fonts
API dan tambahkan nama class yang sesuai ke elemen HTML yang
ingin Anda pengaruhi. Dalam contoh di atas, kita menggunakan efek font shadow-multiple,
sehingga permintaan akan terlihat seperti:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Untuk menggunakan efek, tambahkan nama kelas yang sesuai ke elemen HTML Anda. Nama
class yang sesuai selalu merupakan nama efek yang diawali dengan font-effect-,
sehingga nama class untuk shadow-multiple akan menjadi font-effect-shadow-multiple:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Anda dapat meminta beberapa efek dengan memisahkan nama efek menggunakan karakter
pipa (|).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Berikut adalah daftar lengkap semua efek font yang kami tawarkan:
| Efek | Nama API | Nama Class | Dukungan |
|---|---|---|---|
| Anaglif | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| Tanda Bata | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
| Cetakan Kanvas | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
| Gerak | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
| Pemusnahan | destruction |
font-effect-destruction |
Chrome, Safari |
| Tertekan | distressed |
font-effect-distressed |
Chrome, Safari |
| Kayu Tekanan | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
| Emboss | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
| Kebakaran | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
| Animasi Kebakaran | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
| Frasa | fragile |
font-effect-fragile |
Chrome, Safari |
| Rumput | grass |
font-effect-grass |
Chrome, Safari |
| Es | ice |
font-effect-ice |
Chrome, Safari |
| Mitosis | mitosis |
font-effect-mitosis |
Chrome, Safari |
| Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
| Outline | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| Putih Hijau | putting-green |
font-effect-putting-green |
Chrome, Safari |
| Baja Scuffed | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
| Multi Bayangan | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| Pecah | splintered |
font-effect-splintered |
Chrome, Safari |
| Statis | static |
font-effect-static |
Chrome, Safari |
| Stonewash | stonewash |
font-effect-stonewash |
Chrome, Safari |
| Tiga Dimensi | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
| Float Tiga Dimensi | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
| Vintage | vintage |
font-effect-vintage |
Chrome, Safari |
| Wallpaper | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
Ada banyak cara untuk menata gaya font Anda, dan banyak hal dapat dilakukan melalui CSS. Kami hanya memberikan beberapa ide untuk membantu Anda memulai. Untuk mendapatkan ide lainnya, coba telusuri "efek teks css" di Google dan jelajahi banyak ide yang sudah ada di web.
Bacaan lebih lanjut
- Lihat daftar lengkap jenis font yang disediakan oleh Google Fonts API di Google Fonts.
- Pelajari cara menggunakan Web Font Loader untuk memiliki kontrol yang lebih besar atas pemuatan font.
- Pelajari lebih lanjut cara kerja Google Fonts API di halaman Pertimbangan Teknis.