Google Fonts kini sepenuhnya mendukung font variabel dalam update API v2. Kita akan menjelaskan cara memanggil jenis font tunggal dan beberapa font dan cara menentukan rentang sumbu. Untuk lebih memahami font variabel, pelajari lebih lanjut dengan brosur yang diilustrasikan secara interaktif dari David Berlow di TypeNetwork.
Yang baru
Semuanya dimulai dengan URL dasar baru:
https://fonts.googleapis.com/css2
Sintaksis untuk menentukan gaya dalam setiap keluarga telah berubah untuk mendeskripsikan font variabel 'ruang desain'.
Panduan memulai
Salin dan tempel HTML ini ke dalam file:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Dengan menggunakan browser untuk membuka file, halaman akan merender teks, “Make the Web Beautiful”, dalam font Crimson Pro.
Beberapa keluarga
Untuk meminta beberapa keluarga, tentukan parameter family= untuk setiap keluarga.
Misalnya, untuk meminta font Crimson Pro dan Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Salin dan tempel HTML ini ke dalam file:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
Dengan menggunakan browser untuk membuka file, halaman akan merender teks, “Make the Web Beautiful”, pertama di Crimson Pro, lalu di Literata.
Rentang sumbu
Font variabel menawarkan rentang gaya yang berkelanjutan, sering kali tanpa latensi tambahan. Hal ini relevan dengan desain responsif. Tipografi dinamis ini menggunakan rentang gaya yang berkelanjutan, menawarkan semua bobot antara 100 dan 900 pada halaman, dan secara responsif memvariasikan bobot berdasarkan beberapa kondisi.
Untuk meminta rentang sumbu font variabel, gabungkan 2 nilai dengan ..
| Font | Permintaan |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro Miring [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Bold Miring & [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Gaya individual, seperti bobot
Tanpa spesifikasi gaya, API akan menyediakan gaya default kelompok yang diminta. Untuk meminta gaya individual lainnya, seperti ketebalan tertentu, tambahkan titik dua (:) setelah nama jenis font, diikuti dengan daftar kata kunci properti sumbu dalam urutan abjad, tanda amp (@), dan satu atau beberapa daftar nilai untuk properti sumbu tersebut.
Contoh ini menunjukkan cara kerjanya.
| Font | Permintaan |
|---|---|
| Crimson Pro (default) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Crimson Pro Tebal | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro Reguler & Tebal | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold & Tebal Miring | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts mencantumkan semua gaya yang tersedia untuk setiap jenis font.
Gaya default
Jika permintaan tidak menentukan posisi atau rentang untuk sumbu, posisi default akan digunakan. Posisi default sumbu miring adalah 0 (normal) dan default untuk sumbu bobot adalah 400 (biasa).
Untuk keluarga dengan sumbu yang tidak berisi posisi default, permintaan yang tidak menentukan posisi untuk sumbu tersebut akan gagal. Misalnya, saat meminta keluarga dengan sumbu bobot, mulai dari 500 hingga 900, posisi bobot harus ditentukan.
Bobot non-standar
Dengan font statis, gaya dengan bobot biasanya ditentukan sebagai kelipatan 100 (misalnya, 300, 400, 700). Font variabel menawarkan ketebalan standar dan bobot menengah. Untuk merender bobot menengah:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Mengoptimalkan untuk latensi dan ukuran file
Tentukan dengan tepat gaya yang Anda gunakan. API memberikan gaya yang diminta dalam kumpulan font paling ringkas. Meminta gaya yang tidak digunakan dapat menyebabkan pengguna mendownload data font lebih banyak dari yang mereka butuhkan, sehingga menyebabkan lebih banyak latensi. Jika Anda hanya menggunakan 3 bobot tertentu, tentukan bobot tersebut dalam permintaan Anda sebagai gaya tersendiri. Jika Anda menggunakan rentang bobot berkelanjutan, tentukan rentang berat tersebut dalam permintaan Anda.
Menggunakan tampilan font
Properti font-display
memungkinkan Anda mengontrol hal yang terjadi saat font masih dimuat atau
tidak tersedia. Menentukan nilai selain auto default biasanya sesuai.
Teruskan nilai yang diinginkan di parameter display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Mengoptimalkan permintaan font Anda
Sering kali, saat ingin menggunakan font web di situs atau aplikasi, Anda telah mengetahui sebelumnya huruf apa yang diperlukan. Hal ini sering terjadi saat Anda menggunakan font web dalam logo atau judul.
Dalam hal ini, Anda harus mempertimbangkan untuk menentukan nilai text= dalam URL
permintaan font. Hal ini memungkinkan Google Fonts menampilkan file font yang dioptimalkan untuk
permintaan Anda. Dalam beberapa kasus, ukuran file font dapat dikurangi hingga
90%.
Untuk menggunakan fitur ini, cukup tambahkan text= ke permintaan API Anda. Misalnya, jika
Anda hanya menggunakan Inconsolata untuk judul blog, Anda dapat menempatkan judul tersebut
sebagai nilai text=. Tampilan permintaan akan terlihat seperti berikut:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Seperti semua string kueri, Anda harus mengenkode nilai ke URL:
https://fonts.googleapis.com/css2?family=Comfortaa&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/css2?family=Comfortaa&text=%c2%a1Hola!
Perhatikan bahwa parameter 'text=' hanya bisa ditentukan sekali. Ini berlaku untuk semua keluarga dalam permintaan. Gunakan permintaan API terpisah jika Anda membutuhkan pengoptimalan teks yang berbeda di beberapa keluarga.
Membuat URL API
Keketatan
Sebagai catatan umum, CSS API yang diupdate lebih ketat terkait permintaan yang diterima daripada CSS API asli.
Panduan umum:
- Mencantumkan sumbu menurut abjad (lokalitas
en-US) - Grup nilai sumbu (yaitu tuple) harus diurutkan secara numerik
- Tuple tidak boleh tumpang-tindih atau sentuh (mis.
wght400..500 dan 500..600)
Spesifikasi URL API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: Nama jenis font
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: Tag sumbu, misalnya ital, wdth, wght
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range: <float>..<float>
float: Nilai dalam rentang sumbu yang sesuai
text: Teks yang akan ditampilkan di jenis huruf yang diminta
display: auto | block | swap | fallback | optional
Dukungan browser lama
Browser tanpa dukungan font variabel mungkin tidak dapat menampilkan desain Anda seperti yang diinginkan. Periksa dukungan font variabel browser di caniuse.
Dengan mempraktikkan peningkatan progresif,
Anda dapat menghindari perilaku yang tidak terduga di browser lama tersebut. Gunakan kueri @supports di CSS Anda untuk mengatur fitur font variabel.
Dalam contoh ini, kami ingin menggunakan bobot 450 Teks Markazi, tetapi harus kembali ke Reguler (berat 400) atau Sedang (berat 500) saat fitur font variabel tidak didukung:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
Permintaan CSS Markazi+Text:wght@450 mengirimkan bobot 450 ke klien yang mendukung font variabel dan bobot 400 serta 500 ke klien yang tidak. Secara umum, penggantian di sekitar rentang permintaan Anda akan tersedia di browser lama.
| Sumbu | Penggantian |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Contoh ini menunjukkan gaya apa yang akan tersedia di browser lama untuk beberapa permintaan yang berbeda.
| Permintaan | Gaya yang tersedia di browser lama |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Font variabel yang tersedia
Tabel font variabel yang tersedia di API v2 dapat dilihat di sini.
Bacaan lebih lanjut
- Lihat daftar lengkap jenis font yang disediakan oleh Google Fonts API di Google Fonts.
- Pelajari cara kerja Google Fonts API lebih lanjut di halaman Pertimbangan Teknis.