Update CSS API

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 sumbu x dan sumbu. Untuk memahami font variabel secara mendalam, 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.

Menjadikan Web Indah!

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.

Menjadikan Web Indah!
Menjadikan Web Indah!

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 kontinu, 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
Tampaknya browser Anda tidak mendukung font variabel (caniuse). Pada browser yang mendukung variasi font, teks berikut harus dirender Crimson Pro sebagai set bobot yang halus dari 400 hingga 500. Animasi CSS dapat membuat teks dengan lancar memvariasikan gaya pada interaksi.
Jika browser Anda sepenuhnya mendukung font variabel (caniuse), maka teks berikut harus merender Crimson Pro sebagai set bobot yang halus dari 400 hingga 500. Animasi CSS dapat membuat teks dengan mulus memvariasikan gaya pada interaksi.
Menjadikan Web Indah!
Menjadikan Web Indah!
Menjadikan Web Indah!
Menjadikan Web Indah!
Menjadikan Web Indah!
Menjadikan Web Indah!

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
Tampaknya browser Anda tidak mendukung font variabel (caniuse). Di browser yang mendukung variasi font, teks berikut harus merender Crimson Pro dalam bobot 400, 450, dan 500 yang sangat berbeda secara visual.
Jika browser Anda sepenuhnya mendukung font variabel (caniuse), teks berikut harus merender Crimson Pro dengan bobot 400 yang berbeda secara visual, 450, dan 500.
Menjadikan Web Indah!
Menjadikan Web Indah!
Menjadikan Web Indah!

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 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.