Mengatur dan mengganti font

Jenis, ukuran, ketebalan, gaya, sampai font unduhan sendiri.

Pahami konsepnya

Keluarga properti font mengurus wajah tulisan. font-family memilih jenisnya — nilai aman yang tersedia hampir di semua komputer antara lain sans-serif, serif, monospace (courier), dan cursive; nilainya boleh berantai fallback: font-family: "Roboto", sans-serif berarti coba Roboto dulu, jatuh ke sans-serif bila tak ada. font-size mengatur ukuran (16px, 1.2em, 120%), font-weight ketebalannya (normal, bold, atau angka 100-900), dan font-style kemiringan (italic).

Bosan font bawaan? Dua jalan. Pertama: layanan font daring seperti Google Fonts — pilih fontnya, salin satu baris <link> ke head, dan font itu tersedia untuk CSS-mu. Kedua: berkas font unduhan (ttf/woff) didaftarkan lewat @font-face: beri nama pada font-family, tunjuk berkasnya dengan src: url(...), lalu pakai nama itu seperti font biasa.

Rumus tampilan yang enak dibaca biasanya sederhana: ukuran tubuh 16-18px, line-height longgar, dan maksimal dua jenis font per halaman — satu untuk judul, satu untuk isi. Lebih dari itu, halaman berisiko terlihat seperti papan maket.

Coba contoh kode

body {
  font-family: "Segoe UI", sans-serif;
  font-size: 17px;
}

h1 { font-weight: 800; }

blockquote { font-style: italic; }

@font-face {
  font-family: "TulisanKeren";
  src: url("font/wolf.ttf");
}

.judul-unik {
  font-family: "TulisanKeren", cursive;
  font-size: 44px;
}

body memakai rantai fallback: Segoe UI bila ada, tanpa syarat sans-serif sebagai jaring cadangan. Blok @font-face mendaftarkan berkas unduhan dengan nama TulisanKeren sehingga .judul-unik bisa memakainya — nama cipratan tetap berada di posisi fallback. Inilah cara font khas situs-situs besar sampai ke browser pengunjung.

Latihan singkat

Pasang satu font Google Fonts pilihanmu, terapkan pada judul, dan biarkan isi memakai rantai sans-serif — maksimal dua jenis font dalam satu halaman.