Panduan cepat untuk webfont melalui @font-face

Paul Irish

Pengantar

Fitur @font-face dari CSS3 memungkinkan kita menggunakan jenis huruf khusus di web dengan cara yang mudah diakses, dapat dimanipulasi, dan dapat diskalakan. Tapi, Anda mungkin mengatakan, "Mengapa kita menggunakan @font-face jika kita memiliki Cufon, sIFR, dan menggunakan teks dalam gambar?" Beberapa manfaat memanfaatkan @font-face untuk font khusus:

• Kemampuan penelusuran penuh menurut Temukan (ctrl-F)
• Aksesibilitas ke teknologi asistif seperti pembaca layar
• Teks dapat diterjemahkan melalui layanan terjemahan atau terjemahan dalam browser
• CSS memiliki kemampuan penuh untuk menyesuaikan tampilan tipografi: line-height, letter-spacing, text-shadow, text-align, dan pemilih seperti ::first-letter dan ::first-line

Intinya adalah @font-face

Pada dasarnya, kami mendeklarasikan font jarak jauh kustom baru untuk digunakan seperti:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Kemudian gunakan:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Dalam deklarasi @font-face ini, kita menggunakan properti font-family untuk memberi nama font secara eksplisit. Apa saja, terlepas dari nama fontnya; font-family: 'SuperDuperComicSans'; akan berfungsi dengan baik, meskipun mungkin bukan karena reputasi Anda. Di properti src, kita akan mengarah ke tempat browser dapat menemukan aset font. Bergantung pada browser, beberapa jenis font yang valid adalah eot, ttf, otf, svg, atau URI data yang menyematkan seluruh data font secara inline.

Tentu saja, tidak ada yang sesederhana yang seharusnya. Keterbatasan awal kode di atas adalah bahwa kode tersebut tidak menyajikan EOT ke IE 6-8. Sintaksis @font-face antipeluru mengusulkan cara untuk menyelesaikan masalah ini; versi yang andal mengikutinya.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Belum menyebabkan sakit kepala? Jika Anda lebih suka memulai dengan cepat, buka generator Font Squirrel, alat yang menyederhanakan seluruh proses, mengambil font dan menyiapkan varian serta CSS-nya untuk Anda. Hal ini sangat diperlukan untuk mempraktekkan {i>webfont<i} saat ini.

Dukungan seluler?

Mobile Safari mendukung webfont SVG mulai iOS 3.1 dan Android mendukung otf/ttf mulai versi 2.2. Namun, haruskah pengguna seluler Anda mendapatkan pengalaman tipografi yang ditingkatkan ini? Saran saya tidak. Alasan utamanya adalah karena cara WebKit menangani teks yang menunggu font kustom melalui @font-face: teksnya tidak terlihat. Jadi, pada koneksi seluler bandwidth rendah, pengguna Anda tidak akan melihat teks sama sekali hingga ~50 ribu data font dimuat. Tim Webkit sedang mencari solusi untuk mengaktifkan font pengganti setelah beberapa detik habis masa berlakunya, tetapi sebelum hal tersebut diterapkan, menurut saya tidak adil jika pengguna Anda menemui hambatan seperti itu di antara mereka dan konten Anda.

Layanan webfont

Sejumlah layanan menggabungkan fitur @font-face dalam API yang mudah, sering kali memungkinkan Anda menambahkan satu CSS atau baris skrip ke HTML Anda dan beberapa konfigurasi dan semuanya bisa Anda selesaikan. Aplikasi seperti WebInk, Typekit, dan Fontslive akan memungkinkan Anda menggunakan font (terkadang hingga batas bandwidth) dengan biaya bulanan. Penggunaan layanan ini sangat praktis bagi developer biasa, karena memberikan beberapa kerumitan dalam melayani solusi lintas browser

Google Font API memungkinkan Anda menggunakan sejumlah font kecil yang diseleksi secara bebas dengan hanya menautkan ke stylesheet dan mengizinkan Google menangani masalah lintas browser dan performa. Ini adalah cara tercepat untuk memulai dan menjalankan dengan {i>webfont<i}.

Menemukan tipografi profesional untuk @font-face

Kejutan umum bagi desainer adalah bahwa hanya karena Anda membeli lisensi {i>font<i} (untuk digunakan dalam desain grafis Anda, misalnya), itu tidak berarti Anda dapat menggunakannya dalam @font-face. Lisensi untuk @font-face (atau penyematan web) biasanya dijual terpisah. Baca perjanjian dengan cermat, dan jangan ragu untuk menghubungi pabrik font jika Anda memiliki pertanyaan. Fontspring adalah butik font, yang menjual ratusan font profesional berkualitas, semuanya memenuhi syarat untuk digunakan dengan @font-face. FontFont, dan perusahaan pengecoran lainnya, telah mulai menjual lisensi @font-face secara langsung, meskipun saat ini hanya menargetkan WOFF dan EOT, yang menghilangkan bagian yang cukup besar (tetapi menyusut) dari pasar browser. Ada banyak perusahaan pengecoran yang menambahkan lisensi webfont ke katalog mereka, tetapi jika Anda tidak dapat menemukannya untuk typeface pilihan Anda, hubungi mereka untuk menanyakannya.

Menangani FOUT

Flash of Unstyled Text adalah sebuah fenomena di Firefox dan Opera yang disukai beberapa desainer web. Saat Anda menerapkan typeface kustom melalui @font-face, ada waktu singkat saat memuat halaman, saat font belum didownload dan diterapkan, serta font berikutnya dalam stack font-family digunakan. Hal ini menyebabkan flash font yang berbeda (biasanya kurang bagus), sebelum diupgrade.

WebFont Loader mendampingi Google Font API, library JavaScript yang bertujuan untuk menyediakan sejumlah hook peristiwa yang memberi Anda banyak kontrol atas pemuatan. Mari kita lihat bagaimana Anda bisa membuat browser lain meniru perilaku WebKit dalam menyembunyikan teks penggantian saat font @font-face dimuat.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

Jika JavaScript dinonaktifkan, teks akan tetap terlihat sepanjang waktu, dan jika font mengalami error, teks akan kembali ke serif dasar secara aman. Anggap ini sebagai tindakan sementara; sebagian besar pakar font web ingin menyembunyikan teks penggantian selama 2-5 detik, lalu mengungkapkannya. Perangkat seluler dan bandwidth rendah akan sangat diuntungkan dengan waktu tunggu ini. Dapat dimaklumi bahwa Mozilla sedang berupaya untuk memperbaiki hal ini dalam waktu dekat.

Solusi yang lebih ringan tetapi kurang efektif adalah properti font-size-adjust, yang saat ini hanya didukung di Firefox. Hal ini memberi Anda kesempatan untuk menormalisasi x-height di seluruh stack font, sehingga mengurangi jumlah perubahan yang terlihat di FOUT. Bahkan, generator Font Tupai baru saja menambahkan fitur yang memberi tahu Anda rasio x tinggi font yang Anda upload, sehingga Anda dapat menetapkan nilai font-size-adjust secara akurat.

Ringkasan

Webfont akan memberikan lebih banyak kebebasan kepada desainer dan dengan fitur mendatang seperti ligatur diskresioner dan alternatif gaya, font tersebut akan memiliki lebih banyak fleksibilitas. Untuk saat ini, Anda dapat merasa percaya diri untuk menerapkan bagian CSS3 ini karena mencakup 98% browser yang di-deploy. Selamat menikmati!