Menggunakan Font Kustom pada Halaman Web
Konten teks selalu menjadi bagian penting dari situs web, tetapi pada masa-masa awal Web, para desainer dan pengembang sangat terbatas dalam kontrol tipografi yang mereka miliki atas halaman web mereka. Ini termasuk keterbatasan dalam font yang mereka dapat gunakan dengan handal di situs mereka. Anda mungkin telah mendengar istilah "font web aman" yang disebutkan di masa lalu. Ini mengacu pada set kecil font yang sangat mungkin untuk dimasukkan pada komputer seseorang, yang berarti bahwa jika situs Anda menggunakan salah satu font tersebut, itu adalah taruhan aman bahwa itu akan ditampilkan dengan benar di browser seseorang.
Saat ini, para profesional web memiliki sejumlah font dan opsi jenis baru untuk digunakan, salah satunya adalah format WOFF.
Apa itu WOFF?
WOFF adalah akronim yang merupakan singkatan dari "Web Open Font Format." WOFF digunakan untuk memampatkan font untuk digunakan dengan properti CSS @ font-face. Ini adalah cara untuk menanamkan font di halaman web sehingga Anda dapat menggunakan font khusus di luar “Arial, Times New Roman, Georgia” yang khas - yang merupakan beberapa font aman web yang disebutkan di atas.
WOFF dikirim ke W3C sebagai standar untuk mengemas font untuk halaman web. Ini menjadi draft kerja pada 16 November 2010. Hari ini kami benar-benar memiliki WOFF 2.0, yang meningkatkan kompresi dari versi pertama format oleh hampir 30%. Dalam beberapa kasus, penghematan ini bisa menjadi lebih besar!
Mengapa Menggunakan WOFF?
Font web, termasuk yang dikirim melalui format WOFF, memberikan banyak keuntungan dibandingkan pilihan font lainnya. Berguna seperti font yang aman untuk web, dan tentu saja masih ada tempat untuk font tersebut dalam pekerjaan kami, bagus juga untuk memperluas pilihan kami dan membuka opsi tipografi kami.
Font WOFF memiliki manfaat sebagai berikut:
- Mereka lebih mudah diakses daripada font sebagai gambar. Gaya WOFF menggunakan teks HTML biasa dengan CSS, memberi Anda aksesibilitas dan kontrol desain yang tidak akan diizinkan oleh gambar.
- File WOFF termasuk informasi tipografi seperti bentuk kontekstual dan figur gaya lama. Ini memberi Anda halaman web tipografi yang lebih baik karena Anda menggunakan karakter yang benar, bukan hanya perkiraan.
- Font WOFF dapat membantu dengan internasionalisasi karena Anda dapat menyematkan font dengan karakter dari bahasa lain.
- Seperti semua teks bergaya CSS, font yang ditata dengan WOFF lebih ramah mesin pencari. Mesin pencari tidak "melihat" teks yang disematkan dalam sebuah gambar, dan ketika teks ALT dapat membantu, tidak ada pengganti untuk teks itu sendiri.
- Font WOFF dikompresi, sehingga lebih kecil dari jenis file font lainnya. Ini akan membantu kecepatan pengunduhan situs dan kinerja keseluruhan.
- Anda dapat menggunakan file WOFF untuk mempertahankan identitas merek Anda dengan menyematkan font perusahaan Anda sebagai file WOFF.
Dukungan Browser WOFF
WOFF memiliki dukungan browser yang sangat baik di browser modern, termasuk:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Pada dasarnya ini didukung di seluruh papan hari ini, dengan pengecualian adalah semua versi Opera Mini.
Cara Menggunakan Font WOFF
Untuk menggunakan file WOFF, Anda perlu mengunggah file WOFF ke server web Anda, beri nama dengan properti @ font-face, dan kemudian memanggil font di CSS Anda. Sebagai contoh:
- Unggah font yang disebut myWoffFont.woff ke direktori / font dari server web.
- Di file CSS Anda, tambahkan bagian @ font-face:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') format ('woff');
}
- Tambahkan nama font baru (myWoffFont) ke tumpukan font CSS Anda, seperti nama font lainnya:
p {
font-family: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Tempat Dapatkan Font WOFF
Ada dua tempat bagus Anda dapat menemukan banyak font WOFF yang gratis untuk penggunaan komersial dan non-komersial:
- Buka Pustaka Font
- Font Squirrel
Jika Anda memiliki lisensi untuk menggunakan font yang tidak tersedia dalam format WOFF, Anda dapat menggunakan pencipta WOFF seperti di Font Squirrel untuk mengonversi file font Anda menjadi file WOFF. Ada juga alat baris perintah yang disebut sfnt2woff yang dapat Anda gunakan pada Macintosh dan Windows untuk mengkonversi font TrueType / OpenType Anda ke WOFF.
Unduh biner yang sesuai dengan sistem Anda dan jalankan di baris perintah (atau Terminal) dan ikuti petunjuknya.
Contoh WOFF
Berikut adalah beberapa contoh file WOFF: WOFF Page di HTML5 dalam 24 Jam.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 7/11/17