Google Fonts kini sepenuhnya mendukung font variabel dalam update API v2. Kami akan menjelaskan cara memanggil satu dan beberapa jenis {i>font<i} dan cara menentukannya berbagai sumbu. Untuk pembahasan lebih mendalam tentang font variabel, pelajari lebih lanjut dengan brosur dengan ilustrasi interaktif dari David Berlow di TypeNetwork.
Yang baru
Semuanya dimulai dengan URL dasar baru:
https://fonts.googleapis.com/css2
Sintaks untuk menentukan gaya dalam setiap kelompok telah berubah untuk menggambarkan font variabel ‘ruang desain’.
Panduan memulai
Salin dan tempel HTML ini ke 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, "Membuat Web Beautiful”, dengan 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 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, "Menjadikan Web Indah", pertama di Crimson Pro kemudian di Literata.
Rentang sumbu
Font variabel menawarkan rentang gaya yang berkelanjutan, sering kali tanpa tambahan latensi yang rendah. Hal ini relevan dengan desain responsif. Tipografi dinamis ini menggunakan rentang gaya yang berkelanjutan, menawarkan semua 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 |
---|---|
Merah Lembayung 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 Tebal Miring & [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Gaya individu, seperti bobot
Tanpa spesifikasi gaya, API akan menyediakan gaya default keluarga yang diminta. Untuk meminta gaya individual lainnya, seperti bobot tertentu, tambahkan titik dua (:) setelah nama jenis {i>font<i}, diikuti dengan daftar sumbu kata kunci properti dalam urutan abjad, tanda @ (@), dan satu atau beberapa daftar untuk properti sumbu tersebut.
Contoh berikut menunjukkan penerapannya.
Font | Permintaan |
---|---|
Merah Lembayung Pro (default) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
Merah Lembayung Pro Tebal | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
Crimson Pro Reguler & Menebalkan | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
Crimson Pro Tebal & 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
Ketika permintaan tidak menentukan posisi atau rentang untuk sumbu, parameter posisi yang akan digunakan. Posisi default sumbu miring adalah 0 (normal) dan default untuk sumbu bobot adalah 400 (reguler).
Untuk keluarga dengan sumbu yang tidak berisi posisi default, permintaan yang memiliki posisi sumbu-sumbu tersebut akan gagal. Misalnya, saat meminta keluarga dengan sumbu bobot mulai dari 500 hingga 900, posisi bobot harus yang ditentukan.
Berat non-standar
Dengan {i>font<i} statis, gaya ketebalan 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 latensi dan ukuran file
Tentukan gaya yang Anda gunakan dengan tepat. API mengirimkan gaya yang diminta dalam kumpulan {i>font<i} yang paling ringkas. Meminta gaya yang tidak digunakan dapat menyebabkan pengguna Anda mendownload lebih banyak data font daripada yang dibutuhkan, sehingga menyebabkan lebih banyak latensi. Jika Anda hanya menggunakan 3 bobot khusus, tentukan dalam permintaan Anda sebagai gaya tersendiri. Jika Anda menggunakan rentang berat berkelanjutan, tentukan rentang berat tersebut dalam permintaan Anda.
Gunakan tampilan font
Tampilan font font-display
memungkinkan Anda mengontrol apa yang terjadi saat font masih dimuat atau
jika tidak, tidak tersedia. Menentukan nilai selain auto
default adalah
biasanya sesuai.
Teruskan nilai yang diinginkan dalam parameter display
:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Mengoptimalkan permintaan font Anda
Sering kali, saat ingin menggunakan {i>font<i} web di situs atau aplikasi, Anda tahu sebelumnya huruf mana yang akan Anda perlukan. Hal ini sering terjadi ketika Anda menggunakan {i>font<i} web dalam logo atau judul.
Dalam kasus ini, sebaiknya tetapkan nilai text=
dalam font Anda
URL permintaan. Hal ini memungkinkan Google Fonts mengembalikan file font yang dioptimalkan untuk
terhadap permintaan Anda. Dalam beberapa kasus, hal ini dapat mengurangi ukuran file font hingga
90%.
Untuk menggunakan fitur ini, cukup tambahkan text=
ke permintaan API. Misalnya, jika
Anda hanya menggunakan Inconsolata untuk judul blog, Anda dapat menempatkan judul
itu sendiri 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 UTF-8 karakter. Misalnya, ¡Hola! direpresentasikan sebagai:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Perhatikan bahwa teks 'text=' hanya dapat ditentukan sekali. Berlaku kepada semua keluarga dalam permintaan. Gunakan permintaan API terpisah jika perlu pengoptimalan teks yang berbeda di beberapa keluarga.
Membentuk URL API
Pengetatan
Sebagai catatan umum, CSS API yang diupdate lebih ketat terkait permintaan apa diterima daripada CSS API asli.
Pedoman umum:
- Cantumkan sumbu menurut abjad (
en-US
lokalitas) - Kelompok nilai sumbu (yaitu tuple) perlu diurutkan secara numerik
- Tuple tidak dapat tumpang tindih atau bersentuhan (misalnya
wght
400..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 typeface yang diminta
display
: auto
| block
| swap
| fallback
| optional
Dukungan browser lama
{i>Browser<i} tanpa dukungan {i>font <i}yang bervariasi mungkin tidak dapat menampilkan desain Anda seperti yang diinginkan. Periksa dukungan font variabel browser di caniuse.
Dengan menerapkan progressive enhancement,
Anda dapat menghindari perilaku yang
tidak diharapkan di {i>browser<i} lama tersebut. Gunakan @supports
kueri di CSS Anda untuk menandai fitur font variabel.
Dalam contoh ini, kita ingin menggunakan bobot 450 dari Markazi Text, tetapi harus kembali ke Reguler (berat 400) atau Sedang (berat 500) jika variabel fitur font 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 ketebalan 400 dan 500 ke 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 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 ditemukan di sini.
Bacaan lebih lanjut
- Lihat daftar lengkap jenis font yang disediakan oleh Google Fonts API di Google Fonts.
- Pelajari lebih lanjut cara kerja Google Fonts API di Pertimbangan Teknis.