Dalam 2 tutorial sebelumnya kita sudah membahas mengenai cara mengatur font dengan menggunakan CSS, hanya saja font yang kita gunakan adalah font yang biasanya bersifat umum, umum disini adalah font yang memang kebanyakan terinstall di komputer pengguna web, nah dalam tutorial ini kita akan belajar menggunakan font external dengan menggunakan perintah @font-face di CSS.
Mengenal perintah @font-face
Jika dalam tutorial sebelumnya kita menggunakan attribute font family untuk menset font style untuk textnya, tetapi kekurangan dari font family itu kita hanya bisa menggunakan font yang sifatnya umum.
Lalu bagaimana jika kita ingin menggunakan jenis font lain yang jarang ada di komputer secara umum, anda dapat menggunakan perintah @font-face untuk menggunakan font external kedalam kode css.
Kenapa kita disini menyebut sebagai font external ?? Karena nantinya file font akan kita sertakan di dalam direktori webnya.
Sebelum kita menggunakan @font-face, anda perlu mengetahui beberapa jenis file font yang bisa anda gunakan.
Font memiliki beberapa jenis tipe extention, yang perlu anda ketahui, beberapa jenis font antara lain :
TTF (True Type Fonts)
Font Jenis ini menjadi standart developer sejak tahun 1980 an oleh apple dan microsoft, sehingga menjadi font yang sering digunakan di Mac OS dan Microsoft Windows.
OTF (OpenType Fonts)
Font Jenis ini juga banyak digunakan di sistem operasi yang saat ini banyak digunakan, OTF dibuat menggunakan TrueType Font (TTF), jadi memiliki kesamaan dengan jenis font sebelumnya
WOFF (Web Open Font Format)
WOFF adalah format font yang digunakan untuk halaman web, digunakan dalam dunia developer di tahun 2009 dan sekarang sudah direkomendasikan oleh W3C. WOFF Memiliki ukuran yang lebih kecil dari TTF dan OTF karena memang jenis font ini telah dikompress, sehingga lebih cepat di download untuk digunakan dalam halaman web, saat ini juga telah ada WOFF 2.0 yang memiliki tingkat kompresi lebih baik daripada versi WOFF 1.0
SVG Fonts/Shape
Font dengan jenis SVG ini memperbolehkan document dengan tipe SVG untuk ditampilkan sebagai Text, sebenarnya SVG sendiri adalah format yang digunakan untuk menyimpan gambar Vector.
EOT (Embedded OpenType Fonts)
EOT adalah bentuk compact dari font dengan jenis OTF yang dirancang oleh microsoft sebagai font web, font ini hanya didukung di Internet Explorer, sehingga jarang digunakan.
Dukungan browser untuk jenis font diatas sebagai berikut :
| Font format | Internet Explorer | Chrome | Mozilla Firefox | Safari | Opera |
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Not supported | 36.0 | 35.0* | Not supported | 26.0 |
| SVG | Not supported | 4.0 | Not supported | 3.2 | 9.0 |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
Sumber : https://www.w3schools.com/css/css3_fonts.asp
Cara menggunakan @font-face
Setelah kita mengenal apa saja jenis font yang bisa kita gunakan, selanjutnya kita akan coba untuk menggunakan perintah @font-face untuk set jenis font, langkah – langkahnya adalah sebagai berikut :
Anda perlu mengcopy file font yang ada di komputer anda ke folder dari webnya, disini saya menggunakan windows 7, cara untuk mengambil file font anda bisa masuk kedalam direktori : Control Panel\Appearance and Personalization\Fonts
maka akan tampil sebuah direktori yang berisi file font, yang bisa anda copy.
anda bisa memilih fontnya lalu klik kanan -> copy, dalam contoh ini saya memilih font dengan nama : Jokerman Regular, lalu silahkan di paste di folder tempat anda menyimpan file websitenya.
terlihat file fontnya bernama JOKERMAN.TTF, lalu file html adalah external_font.html
Langkah selanjutnya kita akan menuliskan skrip cssnya di file HTML, dalam contoh pada gambar diatas kita sudah membuat file external_font.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar External Font</title>
<style type="text/css">
@font-face {
font-family: joker;
src: url(JOKERMAN.TTF);
}
p {
font-family: joker;
}
</style>
</head>
<body>
<h2>Sedang Belajar Font-Family</h2>
<p>Text ini menggunakan Font JOKERMAN</p>
</body>
</html>lalu ketika kita akses di browser, tampilannya adalah sebagai berikut :
maka text pada tag paragraf akan ditampilkan dengan jenis font jokerman
penjelasan dari penulisan skrip css adalah sebagai berikut :
- Perintah @font-face digunakan untuk mendeklarasikan jenis font baru, kita menset nama font-family adalah joker, untuk nama ini bisa anda ganti sesuai keinginan anda, lalu untuk src (source) bisa anda isikan dengan lokasi dan nama file fontnya.
- lalu pada selector p kita pasang property font-family: joker; sehingga text pada tag p menggunakan jenis font jokerman, seperti yang telah kita set sebelumnya.
Bagaimana mudah bukan untuk menggunakan external font di CSS.
Mengatasi Dukungan Support Browser
Setelah anda mengerti bagaimana cara untuk menggunakan @font-face, permasalahannya beberapa browser tidak mensupport tipe file font tertentu, bagaimana kalau ternyata font yang kita tulis tidak disupport oleh browser ?
kita bisa menggunakan skrip dibawah ini untuk memanggil beberapa jenis file font secara bersamaan.
<style type="text/css">
@font-face {
font-family: joker;
src: url('JOKERMAN.eot'); /* IE9 Compat Modes */
src: url('JOKERMAN.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('JOKERMAN.woff2') format('woff2'),/* Modern Browsers */
url('JOKERMAN.woff') format('woff'), /* Modern Browsers */
url('JOKERMAN.ttf') format('truetype'),/* Safari, Android, iOS */
url('JOKERMAN.svg#loraregular') format('svg'); /* Legacy iOS */
}
p {
font-family: joker;
}
</style>jadi teman – teman bisa memasang beberapa file font secara bersamaan, tetapi jika web yang anda buat anda tujukan yang mengakses adalah dari komputer desktop, anda cukup menggunakan jenis file woff untuk pengguna browser modern.
Jika anda ingin melakukan konversi tipe file font, bisa menggunakan website http://www.fontsquirrel.com/tools/webfont-generator
Baik itu dulu yang bisa kita bahas dalam tutorial kali ini, kita telah belajar mengenai bagaimana cara menggunakan external font dengan perintah @font-face, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa ditutorial CSS Selanjutnya.