Halaman ini diterjemahkan oleh Cloud Translation API.

Mulai Menggunakan Google Fonts API

Panduan ini menjelaskan cara menggunakan Google Fonts API untuk menambahkan font ke web Anda halaman. Anda tidak perlu melakukan pemrograman apa pun; yang perlu Anda lakukan adalah menambahkan tautan gaya ke dokumen HTML Anda, kemudian mengacu pada {i>font<i} dalam 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 berikut, dalam {i>font <i}bernama {i>Tangerine<i}:

Menjadikan Web Indah!

Kalimat tersebut adalah teks biasa, jadi Anda dapat mengubah tampilannya dengan menggunakan CSS. Coba menambahkan bayangan ke gaya di contoh sebelumnya:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Anda sekarang akan melihat drop shadow di bawah teks:

Menjadikan Web Indah!

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

Tata 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 tautan stylesheet Anda, mulailah dengan URL dasar Fonts API:

https://fonts.googleapis.com/css

Kemudian, tambahkan parameter URL family=, dengan satu atau beberapa nama jenis font dan gaya.

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 Jeruk keprok, Inconsolata, dan Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Meminta beberapa font memungkinkan Anda menggunakan semua font tersebut di halaman Anda. (Tapi jangan berlebihan; kebanyakan laman tidak memerlukan banyak {i>font<i}, dan meminta banyak font dapat membuat halaman lambat dimuat.)

Google Fonts API menyediakan versi reguler dari font yang diminta dengan secara default. Untuk meminta gaya atau bobot lain, tambahkan titik dua (:) ke nama font, diikuti dengan daftar gaya atau bobot 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 Anda minta, Anda dapat memberikan nama lengkap atau singkatan; untuk bobot, Anda juga 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 miring dan Droid Serif tebal, Anda dapat menggunakan 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

Gunakan tampilan font

font-display memungkinkan Anda mengontrol apa yang terjadi saat font tidak tersedia. Menentukan nilai lainnya daripada 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, seperti Latin, Sirilik, dan Yunani). Secara berurutan untuk menentukan subset mana yang harus didownload, parameter subset harus yang ditambahkan ke URL.

Misalnya, untuk meminta subset Sirilik dari Roboto Mono, URL akan menjadi:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Untuk meminta {i>subset<i} Yunani dari Roboto Mono, URL akan menjadi:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Untuk meminta subkumpulan Yunani dan Sirilik dari Roboto Mono, URL akan menjadi:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Subset Latin selalu disertakan jika tersedia dan tidak perlu ditentukan. Perlu diketahui bahwa jika {i>browser<i} klien mendukung rentang unicode (http://caniuse.com/#feat=font-unicode-range) parameter subset diabaikan; browser akan memilih dari subset didukung oleh font untuk mendapatkan apa yang dibutuhkan dalam merender teks.

Untuk daftar lengkap font dan subset font yang tersedia, lihat Google Fonts.

Mengoptimalkan permintaan font Anda

Sering kali, saat Anda ingin menggunakan {i>font<i} web di situs web 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 untuk menampilkan file font yang dioptimalkan untuk permintaan. Dalam beberapa kasus, tindakan ini dapat mengurangi ukuran file font hingga 90%.

Untuk menggunakan fitur ini, cukup tambahkan text= ke permintaan Google Fonts API. Sebagai jika Anda hanya menggunakan Inconsolata untuk judul blog, Anda dapat menempatkan judul itu sendiri sebagai nilai text=. Permintaan akan terlihat seperti berikut seperti:

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 UTF-8 karakter. Misalnya, 'Halo! direpresentasikan sebagai:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Mengaktifkan efek font (Beta)

Saat membuat {i>header<i} atau teks tampilan di {i>website<i}, Anda sering kali ingin memberikan sentuhan gaya pada teks Anda dengan cara yang dekoratif. Untuk menyederhanakan pekerjaan Anda, Google telah menyediakan koleksi efek {i>font<i} yang dapat Anda gunakan dengan upaya minimal untuk menghasilkan teks tampilan yang indah. Contoh:

Ini adalah efek {i>font<i}!

Untuk menggunakan fitur beta ini, cukup tambahkan effect= ke Google Fonts Anda permintaan API dan menambahkan nama kelas yang sesuai ke elemen HTML yang terpengaruh. Dalam contoh di atas, kami menggunakan efek font shadow-multiple, sehingga permintaannya akan terlihat seperti ini:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Untuk menggunakan efek ini, tambahkan nama class yang sesuai ke elemen HTML Anda. Tujuan nama class yang sesuai selalu berupa 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 pipa karakter (|).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Berikut adalah daftar lengkap dari semua efek font yang kami tawarkan:

Efek	Nama API	Nama Kelas	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
Retak	`crackle`	`font-effect-crackle`	Chrome, Safari
Memusnah	`decaying`	`font-effect-decaying`	Chrome, Safari
Pemusnahan	`destruction`	`font-effect-destruction`	Chrome, Safari
Tertekan	`distressed`	`font-effect-distressed`	Chrome, Safari
Kayu Tertekan	`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
Ramah	`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
Putting Green	`putting-green`	`font-effect-putting-green`	Chrome, Safari
Baja Lepuk	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome, Safari
Beberapa 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
Klasik	`vintage`	`font-effect-vintage`	Chrome, Safari
Wallpaper	`wallpaper`	`font-effect-wallpaper`	Chrome, Safari

Ada banyak cara untuk menata gaya font Anda, dan banyak hal yang dapat dilakukan melalui CSS. Kami hanya memberikan beberapa ide untuk membantu Anda memulai. Untuk selengkapnya ide, coba telusuri di Google "efek teks css" dan telusuri 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 mendapatkan lebih leluasa saat memuat font.
Pelajari lebih lanjut cara kerja Google Fonts API di Pertimbangan Teknis.