FlowingDev

@font-face, dijelaskan: ngajarin browser ngomong pakai tipografimu

Kuasai rule CSS @font-face untuk nampilin custom web font secara efisien pakai font-display, preloading, unicode-ranges, dan variable weights.

Coba tool-nya: @font-face Generator

Dalam satu kalimat

@font-face adalah rule CSS yang ngasih izin ke web browser buat nge-download dan nge-render tipografi kustom, yang akhirnya ngebebasin desainer dari jajahan setengah lusin font "web-safe" bawaan komputer.

Masalah yang diselesaikan

Kalau kamu bikin website di akhir 90-an atau awal 2000-an, tipografi web itu ibarat padang gurun yang suram. Kamu pasrah aja sama font apa pun yang kebetulan ada di OS (operating system) user. Kamu nulis font-family: Arial, Helvetica, sans-serif; terus berdoa. Kalau desainer ngasih mockup Photoshop dengan font serif kustom yang cantik buat headline, kamu cuma punya tiga pilihan menyedihkan:

  1. Image Hack: Potong headline di Photoshop dan pasang sebagai tag <img>. SEO benci banget sama cara ini. Screen reader nggak bisa bacanya. Layar Retina nantinya bakal bikin gambar ini jadi kotak-kotak ngeblur.
  2. sIFR (Scalable Inman Flash Replacement): Workaround iblis yang pakai JavaScript buat nyari teks, nyembunyiinnya, terus nge-embed movie Adobe Flash kecil yang nge-render teks persis sama pakai font kustom. Berat, banyak bug, dan bikin baterai laptop jebol.
  3. Cufón: Library JavaScript yang ngubah font path jadi grafik vektor dan nge-render di atas <canvas>. Kelihatan cakep sih, tapi kamu jadi nggak bisa nyeleksi atau nge-copy teksnya dengan gampang.

W3C sebenarnya udah ngajuin @font-face sejak era CSS2 (1998), tapi waktu itu browser nggak sepakat soal format font, dan para pembuat font (foundries) ketakutan setengah mati sama pembajakan (kalau kamu taruh file .ttf di server, siapa aja bisa nge-download).

Baru pas era 2010-an, seiring makin populernya Web Open Font Format (WOFF)—format yang secara khusus dikompres dan dirancang buat web—@font-face akhirnya jadi realita. Hari ini, @font-face nggak cuma sekadar nge-load font; dia ngatur tarian rumit dari network request, caching, subsetting, dan strategi rendering buat mastiin websitemu tetep kenceng tapi tampilannya persis kayak yang dimau desainer.

Cara kerjanya di balik layar

Pada intinya, @font-face adalah sekumpulan instruksi. Dia memetakan nama karanganmu ke sebuah file yang nongkrong di server.

Anatomi dari Rule

Deklarasi @font-face yang modern dan production-ready bentuknya kira-kira begini:

@font-face {
  font-family: 'MyAwesomeFont';
  src: local('MyAwesomeFont Regular'), 
       url('/fonts/myawesomefont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

Mari kita bedah magic di dalam blok ini.

Format dan Monopoli WOFF2

Perhatiin bagian format('woff2'). Di zaman kegelapan dulu, developer harus nyediain tumpukan file yang "bulletproof" (anti bocor) mulai dari .eot (buat Internet Explorer purba), .ttf (buat Safari/Android jadul), .svg (buat iOS legacy), dan .woff.

Hari ini, web berjalan di atas WOFF2. Dia pakai kompresi Brotli, yang bikin ukuran file sekitar 30% lebih kecil dibanding pendahulunya, WOFF. Karena WOFF2 punya dukungan browser yang nyaris universal (lebih dari 97% secara global), biasanya kamu cuma perlu nge-serve satu file .woff2 aja, mungkin ditambah fallback WOFF standar kalau targetmu adalah mesin-mesin enterprise yang super usang.

Ngendaliin Efek Kilat (font-display)

Pas browser ketemu teks yang di-style pakai font kustom, tapi file font-nya belum kelar di-download, dia harus milih. Apa dia nampilin teks pakai font fallback? Atau dia nyembunyiin teksnya sampai font kustomnya datang?

Hal ini nyiptain dua singkatan yang terkenal ngeselin: FOUT (Flash of Unstyled Text) dan FOIT (Flash of Invisible Text). Deskriptor font-display ngasih kamu kuasa buat ngatur behavior ini.

font-display Behavior Kapan dipakainya
auto Bawaan browser (biasanya nge-block rendering sampai 3 detik). Jangan pernah, kalau kamu peduli sama performance.
swap Langsung nampilin font fallback (FOUT), terus ditukar (swap) ke font kustom pas udah siap. Teks bodi, artikel, elemen UI. User bisa langsung mulai baca.
block Nyembunyiin teks (FOIT) sebentar, terus nampilin fallback, baru di-swap. Ikon atau logo di mana font fallback bakal kelihatan hancur dan berantakan.
fallback Block singkat, periode swap singkat. Kalau kelamaan, bakal nge-batalin font kustom sepenuhnya di halaman tersebut. Teks dekoratif buat koneksi lemot.
optional Block yang super singkat. Kalau font nggak ada di cache atau nggak nge-load dengan super cepat, browser bakal nyerah seutuhnya. Font "nice to have" yang stabilitas layout-nya jauh lebih penting.

Subsetting dengan unicode-range

File font lengkap yang isinya huruf Latin, Cyrillic, Yunani, dan glyph CJK (Chinese, Japanese, Korean) yang rumit ukurannya bisa ber-megabyte.

Properti unicode-range itu tool optimasi yang brilian banget. Dia ngasih tahu browser, "File font ini cuma nge-cover karakter-karakter spesifik ini." Kalau kamu set unicode-range: U+0000-00FF (Latin Dasar), browser bakal nge-parse HTML kamu. Kalau nggak nemu karakter Latin sama sekali, dia bahkan nggak bakal nge-download file font-nya. Ini ngemungkinin kamu buat memecah font raksasa jadi potongan-potongan bahasa kecil (bite-sized), nge-load cuma apa yang beneran dibutuhin sama user.

Variable Fonts

Secara tradisional, kalau kamu pengen Regular, Italic, Bold, dan Bold Italic, kamu harus nge-load empat file .woff2 yang beda-beda.

Variable fonts ngebungkus seluruh family ke dalam satu file dengan ngedefinisiin "axes of variation" (sumbu variasi). Daripada pakai weight statis kayak 400 atau 700, variable font bisa di-render dengan tingkat ketebalan 432 atau 781. 

@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/myfont-var.woff2') format('woff2');
  font-weight: 100 900; /* Accepts any weight between 100 and 900 */
}

Base64 Embedding vs. Preloading

Terkadang network request itu sendiri yang jadi bottleneck (biang kerok macet). Kamu punya dua strategi tingkat lanjut (advanced):

  1. Preloading: Nambahin <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> di dalam <head> HTML-mu ngasih tahu browser buat nge-fetch font sekarang juga, bahkan sebelum dia nge-download CSS.
  2. Base64 Embedding: Kamu bisa ngubah file font biner jadi string teks raksasa dan langsung kamu paste ke dalam url() di rule @font-face kamu. Ini ngilangin network request seutuhnya, tapi ningkatin ukuran file CSS sekitar 33%. Cara ini nge-block render seluruh halaman sampai CSS selesai di-download, jadi ini bener-bener dikhususin cuma buat subset font yang super kecil dan hyper-optimized (kayak logo kustom).

Cerita dari dunia nyata

Tombol E-commerce yang Tak Kasat Mata

Sebuah situs e-commerce butik mutusin pakai font ikon kustom buat antarmuka (UI) mereka. Mereka pakai deklarasi @font-face standar tanpa font-display. Pakai koneksi Wi-Fi kantor yang kenceng, semuanya kelihatan memukau.

Tapi, user mobile di jaringan 3G pada kabur (bounce) dari situs dengan angka rekor. Waktu para developer nyoba nyimulasiin jaringan lemot, mereka nemuin biang keroknya: browser nungguin font ikon buat ke-load sebelum nge-render tombol "Add to Cart". Akibatnya muncul FOIT (Flash of Invisible Text) selama 4 detik. User bener-bener nggak bisa ngelihat tombol buat ngasih uang ke perusahaan. Cuma dengan nambahin font-display: swap; buat teks dan nge-preload font ikon, conversion rate mereka terselamatkan.

Tragedi Tipografi Multi-Megabyte

Sebuah blog tech populer mutusin buat support internationalization. Biar tipografi mereka yang necis tetep konsisten, mereka masukin font Noto Sans raksasa yang nge-cover full karakter CJK (Chinese, Japanese, Korean). Ukuran file font-nya nyaris 6MB.

Tiba-tiba, user di AS yang baca artikel full bahasa Inggris pada ngeluh soal load time yang lemot. Browser mereka nge-download 6MB glyph Jepang dan Korea cuma buat baca artikel soal JavaScript. Tim developer akhirnya nerapin unicode-range. Mereka mecah font-nya jadi 30KB subset Latin dan 5.9MB subset CJK. Browser secara otomatis nge-request file 30KB aja buat pembaca bahasa Inggris, dan instan nyembuhin penurunan performa tersebut.

Redesign yang Kedut-Kedutan

Sebuah agensi desain ngerancang layout editorial yang kece badai pakai sembilan weight berbeda dari font sans-serif klasik. Si developer dengan rajin nge-ekspor sembilan file .woff2 yang beda-beda dan nulis sembilan rule @font-face.

Karena browser nge-download file secara asynchronous, halamannya bakal ngadat-ngadat (stutter) pas muncul. Weight 300 ke-load, terus 700, baru 400, ngebikin layout jadi lompat-lompat agresif dan ngitung ulang text wrapping empat atau lima kali dalam sedetik. Akhirnya developer itu ngeganti kesembilan file tadi pakai satu Variable Font (.woff2-variations). File tunggal itu 40% lebih kecil dibanding sembilan file tadi digabungin, cuma butuh satu request, dan nge-render halaman dalam satu sapuan visual (paint) yang mulus.

Kesalahan umum dan jebakan

  • Nge-serve format font purba ke browser modern: Berhenti nge-serve font .ttf, .eot, dan .svg kecuali kamu punya alasan pasti berbasis data buat men-support IE8 atau perangkat Android berumur satu dekade. Tetaplah setia pada WOFF2.
  • Lupa naruh crossorigin di preload: Kalau kamu pakai <link rel="preload"> buat font, kamu wajib nyertain atribut crossorigin, walau font-nya di-host di domainmu sendiri. Gara-gara spesifikasi keamanan browser, font di-fetch pakai mode anonim CORS. Kalau atribut ini dihilangin, browser bakal nge-download font-nya dua kali.
  • Base64 encode buat font bodi berukuran masif: Nge-embed font 100KB langsung ke dalam CSS-mu bakal bikin payload CSS bengkak dan nge-block render. Lakuin encode cuma buat font yang super kecil (kayak subset 5KB yang dipakai buat logo).
  • Ngabain font-display: Ngandelin bawaan browser hampir selalu nyiksa user di koneksi lambat. Deklarasiin font-display: swap secara eksplisit buat teks bodi untuk ngutamain kenyamanan baca dibanding sekadar estetika.
  • Preload semua font di halaman: Preloading itu instruksi prioritas tinggi. Kalau kamu nge-preload font headline tebal dan miring yang nongkrongnya di bagian paling bawah halaman, kamu malah nyuri bandwidth jaringan dari JavaScript dan CSS kritikal yang dibutuhin buat nge-load bagian atas halaman. Lakuin preload khusus font "hero" aja.
  • Terlalu ngandelin local(): Pakai local('Helvetica') emang ngasih tahu browser buat pakai copy lokal kalau ada. Tapi, konvensi penamaan font beda-beda banget antara Mac, Windows, dan Linux. Apa yang menurutmu local('Helvetica Neue Bold') mungkin aja gagal diam-diam di OS lain.

Kenapa ini penting buat masuk radarmu

Web development itu ibarat tarik tambang abadi antara estetika dan performance. Kamu lagi ngebangun brand, dan tipografi adalah suara dari brand itu. Tapi kamu juga lagi ngebangun software, dan tiap kilobyte itu berharga banget buat user dengan koneksi bapuk di dalam kereta bawah tanah.

Nulis rule @font-face yang sempurna itu terkenal super ribet. Ini butuh pemahaman mendalam soal kelakuan aneh (quirks) browser, MIME types, sintaks subsetting, dan format kompresi. Generator modern nggak cuma nulisin sintaks CSS-nya buat kamu; dia juga nyerap best practice. Generator otomatis bikin file WOFF2, nyusun struktur variable axes, nerapin fallback font-display yang tepat, dan ngeluarin tag Base64 atau preload persis kayak yang dibutuhin buat ngelewatin bottleneck jaringan. Ini mastiin pas aplikasimu "berbicara", browser bener-bener tahu gimana cara ngucapin kata-katanya.

Gali lebih dalam

Teori beres. Saatnya praktik — 100% di browser kamu.

Coba tool-nya: @font-face Generator