Tidak semua jenis font akan dikenali dan ditampilkan oleh internet browser. Jika tidak kenal maka browser akan menampilkan jenis font default semacam Arial, Helvetica, Verdana, sans-serif ataupun serif. Kadang kita ingin menghiasi halaman web kita dengan font-font dekoratif untuk tujuan tertentu tergantung kategori website kita.
Untuk melaksanakan hal itu maka dibutuhkan suatu cara agar font pilihan kita dapat ditampilkan oleh web browser. Cara yang sering dilakukan adalah dengan menggunakan webfont atau juga disebut embedding font. Tidak rumit, webfont yang dipilih diupload ke web server kita melalui file manager yang ada di cPanel ataupun melalui FTP software. Setelah itu kita mengarahkan halaman web yang akan kita hiasi dengan font tersebut ke directory dimana font itu berada melalui css script.
Webfont disupport oleh kebanyakan web browser namun tidak dengan cara yang sama. Oleh karenanya diperlukan cara agar webfont kita dapat ditampilkan saat pengguna mengakses halaman web kita, mengingat setiap pengguna tidak menggunakan browser yang sama.
Ada empat jenis file font yang harus kita upload agar webfont kita dikenali oleh browser-browser utama, yaitu file font dengan ekstensi TTF, EOT, WOFF dan SVG. Sebagai contoh adalah font yang digunakan untuk logo/header di atas yaitu Boogaloo Font, maka file-file yang dibutuhkan adalah:
- boogaloo-webfont.eot
- boogaloo-webfont.woff
- boogaloo-webfont.ttf
- boogaloo-webfont.svg
Tempatkan keempat file ini di suatu directory, misalnya saja directory “fonts” (tentunya di bawah directory utama / public_html).
Selanjutnya yang perlu dilakukan adalah memodifikasi file stylesheet (css file), dengan menambahkan baris-baris sebagai berikut (contoh):
@font-face{
font-family: 'boogaloo';
src: url('caviardreams-webfont.eot');
src: url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
url('caviardreams-webfont.woff') format('woff'),
url('caviardreams-webfont.ttf') format('truetype'),
url('caviardreams-webfont.svg#webfont') format('svg');
}
Pada contoh di atas font-family kita adalah “boogaloo”. Anda sekarang bisa menggunakan font pilihan anda ini untuk menghiasi halaman web anda dengan memodifikasi elemen di css file anda dengan menambahkan/mengganti “boogaloo” ke dalam properti “font-family”, contoh:
font-family : Arial, sans-serif;
menjadi :
font-family : 'boogaloo', Arial, sans-serif;
Selesai. Langkah selanjutnya adalah mengetest apakah font yang anda instal telah ditampilkan di browser anda. Semua browser utama telah mensupport metode ini, termasuk Internet Explorer (IE), Firefox, iPhone dan iPad.
Untuk mendapatkan file-file webfont yang dibutuhkan (TTF, EOT, WOFF dan SVG), anda bisa mendapatkannya di internet dalam bentuk jadi atau jika menginginkan jenis font pilihan anda sendiri, anda dapat mengkonversinya secara online melalui beberapa website tertentu dan anda akan mendapatkan font kit yang berisi keempat jenis file tersebut. Anda bisa saja menginstal salah satu jenis file tersebut, namun tidak semua browser nanti akan menampilkannya, karena suatu browser hanya mendukung file tertentu saja.
Salah satu website yang menyediakan layanan webfont ini secara gratis adalah : Font Squirrel.
Font-font tersebut saya download melalui website tersebut berupa file true type font (ttf). Kemudian saya konversi di website itu juga. Untuk mengkonversinya,
- klik tab @font-face generator,
- kemudian klik add file, pilih file yang akan dikonversi, tunggu beberapa saat file diupload,
- centang pernyataan bahwa font yang kita upload berlisensi free
- klik tombol download
- anda akan mendapat file zip yang berisi 4 file tadi dan file demo berupa html
Namun tidak semua font yang anda pilih dan anda sukai akan dikonversi oleh Font Squirrel dengan alasan hak cipta. Oleh karenanya pilihlah font yang benar-benar berlisensi free sebelum mengkonversi melalui Squirel. Alternatifnya adalah dengan menggunakan Google Web Fonts. Di sana ada sekitar 500 an fonts yang siap anda gunakan.
1. Browsing dan pilih font yang anda inginkan
2. Jika sudah menemukan, klik link Quick-use yang ada tepat di bawah contoh huruf/font.
3. Jika tidak ada yang perlu disetting lagi, langsung saja ke poin Add this code to your website. Di situ terdapat kode yang harus anda copy paste di baris awal elemen <head> dokumen HTML anda.
4. Anda tinggal memakainya dengan mendefinisikannya di dokumen CSS anda, yaitu dengan bentuk style font-family diikuti dengan nama font. Untuk lebih jelasnya anda bisa langsung ke SANA