Panduan praktis tentang format font web, cara menambahkan @font-face, konfigurasi server (MIME, CORS), serta praktik terbaik untuk kinerja dan kepatuhan lisensi saat menyajikan font dari direktori seperti wp-includes/fonts.
Banyak situs web menyimpan berkas font di folder khusus agar dapat dipanggil oleh stylesheet. Path seperti /wp-includes/fonts/ seringkali mengindikasikan lokasi file font yang di-serve untuk digunakan oleh tema atau komponen front-end.
Artikel ini menjelaskan format font web yang umum, bagaimana menambahkan dan memanggil font dengan @font-face, pengaturan server yang perlu diperhatikan, serta praktik terbaik untuk kinerja, fallback, dan kepatuhan lisensi.
Direktori bernama wp-includes biasanya muncul dalam instalasi WordPress sebagai salah satu folder inti. Versi dan struktur tiap instalasi bisa berbeda, tetapi nama folder yang mengandung kata fonts umumnya dipakai untuk menaruh berkas font yang akan diakses oleh stylesheet.
Peran folder seperti ini sederhana: menyimpan berkas font (misalnya .woff, .woff2, .ttf) sehingga dapat diunduh oleh browser ketika stylesheet memanggilnya. Namun menaruh font di lokasi ini memerlukan perhatian pada izin akses, pengaturan server, dan kepatuhan lisensi.
Beberapa format font didesain khusus untuk web karena ukuran dan dukungan kompresinya. Format yang umum dipakai meliputi WOFF dan WOFF2, yang menawarkan kompresi baik untuk pengiriman lewat jaringan. Format TTF/OTF masih dipakai terutama untuk kompatibilitas, sedangkan EOT adalah format yang dulunya digunakan oleh browser lama.
Saat menyediakan font dari folder server, prioritaskan format yang modern dan terkompresi (misalnya WOFF2) untuk pengunjung dengan browser terbaru, dan sertakan fallback berbasis format yang lebih luas didukung jika diperlukan.
Untuk menggunakan font yang disimpan di direktori, tambahkan aturan @font-face pada stylesheet Anda. Contoh sederhana:
/* Contoh @font-face */ @font-face { font-family: 'NamaFontSaya'; src: url('/wp-includes/fonts/namafont.woff2') format('woff2'), url('/wp-includes/fonts/namafont.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; }
Keterangan singkat pada properti penting: font-family memberi nama untuk dipakai di CSS; src menunjuk berkas font di server; font-display mengontrol perilaku rendering saat font belum selesai dimuat (swap adalah pilihan yang baik untuk menghindari teks tak terlihat). Selalu sertakan beberapa format pada src agar lebih kompatibel.
Agar browser dapat mengambil dan menggunakan berkas font, server harus mengirimkan header MIME type yang sesuai. Contoh MIME type: font/woff2 untuk .woff2 dan font/woff untuk .woff. Banyak server modern sudah mengatur ini secara otomatis, tetapi pengecekan tetap penting jika terjadi masalah pemuatan.
Cross-Origin Resource Sharing (CORS) sering menjadi penyebab kenapa font tidak dimuat ketika font disajikan dari domain berbeda (atau subdomain) dibanding halaman yang memanggilnya. Pastikan server yang men-serve font mengirimkan header Access-Control-Allow-Origin yang sesuai jika font diakses lintas-origin.
Selain itu, periksa izin file dan aturan konfigurasi server (misalnya .htaccess di Apache atau konfigurasi nginx) supaya tidak ada pembatasan akses yang mencegah browser mengunduh berkas font.
Untuk kinerja, gunakan format terkompresi (WOFF2), gabungkan subset font bila memungkinkan (hanya karakter yang diperlukan), dan manfaatkan caching melalui header Cache-Control agar font tidak terus diunduh ulang. Pertimbangkan juga teknik font-loading (font-display, preload) untuk mengoptimalkan pengalaman pengguna.
Sediakan fallback font di deklarasi CSS agar tampilan tetap dapat dibaca bila font kustom gagal dimuat. Contoh: font-family: 'NamaFontSaya', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
Selalu periksa lisensi font sebelum menyimpannya di server. Beberapa font komersial melarang self-hosting dan mengharuskan pemanggilan melalui penyedia layanan; yang lain memperbolehkan self-hosting dengan syarat tertentu. Mematuhi lisensi melindungi dari masalah hukum dan etis terkait penggunaan font.