CSS @font-face

@font-face adalah CSS at-rule yang memberi tahu browser di mana menemukan file font dan apa namanya. Ini pertama kali didukung di IE 4 pada tahun 1997, tetapi baru menjadi praktis di berbagai browser sekitar tahun 2010 ketika WOFF tiba dan browser lain mengimplementasikan aturan ini secara konsisten.

Untuk icon fonts, @font-face adalah pengikat antara file font Anda dan CSS classes yang menampilkan ikon. Tanpanya, browser tidak memiliki cara untuk mengetahui bahwa font-family: 'MyIcons' harus memuat file tertentu dari server Anda.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Descriptor font-family memberi nama yang akan Anda referensikan nanti. Descriptor src memberi tahu browser di mana mengunduh file dan format apa. Descriptor font-weight dan font-style memastikan browser tidak mencoba mensintesis varian tebal atau miring. Dan font-display mengontrol apa yang terjadi saat font sedang memuat.

Petunjuk format() setelah setiap URL memberitahu browser format file apa yang ada, sehingga dapat melewati format yang tidak didukung tanpa mengunduhnya terlebih dahulu. Selama bertahun-tahun, kumpulan format yang direkomendasikan telah menyempit secara dramatis seiring peningkatan dukungan browser.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Dengan cakupan browser 97%+, hanya WOFF2 sudah cukup untuk sebagian besar proyek modern. Ini adalah pendekatan paling sederhana dan berkinerja tinggi.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

Menambahkan WOFF sebagai fallback mencakup IE 11, yang tidak mendukung WOFF2. Browser modern akan mengambil file WOFF2; IE 11 beralih ke WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

Full "bulletproof" stack mencakup EOT untuk IE 6-8, WOFF2 untuk browser modern, WOFF untuk IE 9-11, dan TTF sebagai fallback terakhir. Browser mencoba setiap entri src secara berurutan dan menggunakan format pertama yang dipahami. Pendekatan ini hanya diperlukan untuk proyek dengan persyaratan warisan yang ekstrem.

Pola standar untuk icon fonts menggunakan base class yang menetapkan font-family dan style rendering bersama, lalu icon class individual yang menggunakan pseudo-elements ::before dengan content yang diatur ke Unicode code point setiap ikon.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

Base class mereset font styling untuk mencegah browser menerapkan tebal, miring, atau transformasi lain yang akan mendistorsi ikon. Properti -webkit-font-smoothing dan -moz-osx-font-smoothing mengaktifkan antialiasing untuk rendering yang lebih tajam di macOS dan iOS.

Setiap icon class menetapkan pseudo-element ::before dengan Unicode code point yang ditetapkan untuk glyph tersebut. Notasi backslash-E (\E001) adalah cara CSS mereferensikan karakter Unicode dengan hex code point-nya.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Baik <i> maupun <span> bekerja sama baiknya. Elemen itu sendiri kosong — ikon sepenuhnya dirender oleh pseudo-element ::before.

Descriptor font-display mengontrol apa yang ditampilkan browser saat file font masih diunduh. Ini penting untuk icon fonts karena pengaturan yang salah dapat membuat ikon tidak terlihat saat halaman dimuat.

Untuk icon fonts, swap adalah pilihan yang direkomendasikan. Kilatan singkat konten yang belum ditata (di mana code point ikon mungkin muncul sebagai kotak atau spasi kosong) jauh lebih baik daripada ikon yang tidak terlihat. Dengan block, pengguna dapat melihat ruang kosong di mana ikon seharusnya berada hingga 3 detik pada koneksi lambat — yang terlihat seperti halaman yang rusak.

File font secara default memblokir render — browser tidak akan melukis teks menggunakan font kustom hingga file telah diunduh. Berikut teknik untuk meminimalkan dampaknya:

• Preload file font — gunakan <link rel="preload"> untuk mulai mengunduh font sesegera mungkin, sebelum browser bahkan mem-parse CSS yang mereferensikannya.
• Self-host font Anda — menyajikan file font dari origin yang sama dengan HTML menghindari pencarian DNS ekstra dan pengaturan koneksi, dan menghilangkan masalah CORS.
• Subset font Anda — hapus ikon yang tidak digunakan untuk mengurangi ukuran file. Font 500 ikon di mana Anda hanya menggunakan 50 ikon membuang 90% dari unduhan.
• Gunakan unicode-range — jika Anda memiliki beberapa set ikon, descriptor ini memberi tahu browser untuk hanya mengunduh file font ketika karakter dalam rentang yang ditentukan benar-benar digunakan di halaman.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

Atribut crossorigin diperlukan bahkan untuk font same-origin — ini adalah keanehan dari spesifikasi font loading. Tanpanya, browser akan mengunduh font dua kali: sekali dari petunjuk preload (tanpa CORS) dan sekali dari aturan @font-face (dengan CORS).

• Error CORS — File font yang disajikan dari origin berbeda (misalnya CDN subdomain) memerlukan header Access-Control-Allow-Origin di server. Atau, gunakan atribut crossorigin pada tag <link>. Tanpa konfigurasi CORS yang tepat, browser akan memblokir font secara diam-diam.
• Ikon menampilkan kotak atau persegi panjang — Ini biasanya berarti jalur file font salah, font belum dimuat, atau nama font-family dalam icon class tidak cocok dengan nama dalam deklarasi @font-face. Periksa tab Network browser Anda untuk memastikan file font dimuat dengan status 200.
• Ikon menampilkan glyph yang salah — Konflik Unicode code point dengan font sistem. Jika icon font Anda menggunakan code points dalam rentang yang tumpang tindih dengan font sistem umum, browser mungkin merender karakter sistem sebagai gantinya. Icon fonts biasanya menggunakan Private Use Area (U+E000 hingga U+F8FF) untuk menghindari ini.