CSS Academy · Pelajaran

Google Fonts dan @font-face

Muat font eksternal dari Google Fonts atau tentukan font khusus menggunakan aturan @font-face.

Pelajaran 4 dari 413 langkah

Google Fonts dan @font-face adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Font Khusus?

Font yang aman untuk web hanya menyediakan beberapa pilihan. Font khusus memungkinkan Anda menyesuaikan identitas merek secara tepat. Dua pendekatan utamanya adalah Google Fonts (layanan yang di-host) dan @font-face (di-host sendiri).

Penyiapan Google Fonts

Kunjungi fonts.google.com, pilih keluarga font, pilih ketebalan, lalu salin tag <link> ke dalam <head> HTML Anda:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Menggunakan Google Fonts dalam CSS

Setelah menautkannya, rujuk font berdasarkan namanya dalam tumpukan font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parameter API Google Fonts

Parameter display=swap menggunakan strategi Font Display Swap — teks langsung ditampilkan dalam font cadangan, lalu diganti ketika font khusus selesai dimuat. Hal ini mencegah teks tidak terlihat selama pemuatan.

Dasar-Dasar @font-face

@font-face memungkinkan Anda memuat berkas font khusus yang di-host sendiri. Tentukan nama keluarga font dan sumber berkasnya:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: Format Modern

WOFF2 (Format Font Terbuka Web 2) adalah format yang disarankan. Format ini menawarkan kompresi terbaik (biasanya 30% lebih kecil daripada WOFF) dan didukung oleh semua peramban modern. Selalu sertakan WOFF sebagai cadangan.

Beberapa Ketebalan dengan @font-face

Deklarasikan satu blok @font-face untuk setiap kombinasi ketebalan/gaya. Gunakan nama font-family yang sama agar peramban memilih berkas yang tepat secara otomatis:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Properti font-display

Deskriptor font-display mengendalikan perilaku pemuatan font:

swap — langsung tampilkan font cadangan, lalu ganti ketika siap (disarankan)
block — teks tidak terlihat hingga 3 detik
fallback — pemblokiran singkat, lalu gunakan font cadangan secara permanen
optional — gunakan hanya jika sudah tersimpan dalam cache

<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face untuk Font Variabel

Font variabel menentukan rentang sumbu, bukan nilai ketebalan tetap:

<p class="variable-text">Variable weight text (550)</p>

Memuat Lebih Awal Font Penting

Muat lebih awal berkas font yang paling penting untuk mengurangi penundaan yang menghambat proses render. Tambahkan <link rel="preload"> sebelum stylesheet:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() untuk Melewati Pengunduhan

Gunakan local() dalam src untuk memeriksa apakah pengguna sudah memasang font tersebut sebelum mengunduhnya:

<p class="roboto-text">Uses local Roboto if installed</p>

Pemeriksaan Singkat

Format font manakah yang memberikan kompresi terbaik dan dukungan terluas pada peramban modern?

Jawab di pelajaran interaktif

Ringkasan

Google Fonts menyediakan font yang di-host dengan mudah melalui tag <link>. Host sendiri font dengan @font-face menggunakan format WOFF2 dan font-display: swap untuk kinerja terbaik. Muat lebih awal font penting dan gunakan local() untuk menghindari pengunduhan yang tidak perlu.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Google Fonts dan @font-face” gratis?

Ya — teks lengkap “Google Fonts dan @font-face” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Google Fonts dan @font-face”?

Muat font eksternal dari Google Fonts atau tentukan font khusus menggunakan aturan @font-face. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Google Fonts dan @font-face” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Keluarga Font dan Font yang Aman untuk Web
Ukuran, Ketebalan, dan Gaya Font
Perataan, Dekorasi, dan Jarak Teks
Google Fonts dan @font-face

← Kembali ke CSS Academy