Styling Web Font dengan PHP FLIR (for Newbie)
Buat yang belum kenal FLIR namun sudah biasa ngoding pakai PHP, tentu sudah ada bayangan. Paling ujung-ujungnya FLIR ini adalah merubah font jadi image dengan GD Library. Yup. Tepat sekali.
FLIR atau Facelift Image Replacement adalah alternatif lain dari sIFR selain Cufon (yang sudah pernah dibahas di artikel sebelumnya). FLIR ini (menurut pendapat saya) aman dan nyaman digunakan. Karena bisa tampil baik di IE6 tanpa rewel. Bahasa yang digunakan adalah PHP (tested on PHP5. PHP4 nggak tau yah. mau nyoba?) dengan sedikit javascript.
Bagi designer yang tidak begitu menguasai PHP, tak perlu khawatir. Karena FLIR ini sifatnya seperti plugin. Disimpan dengan rapi di sebuah folder, kemudian dipanggil dengan script javascript sederhana pada halaman yang textnya mau distyling.
Juga, pada FLIR pack yang akan kita download nanti, sudah terdapat beberapa jenis font yang siap dicoba. Antara lain:
tribalbenji Tribal_Font.ttf –> dipanggil di CSS sebagai tribalbenji
ArtOfIlluminating.ttf –> dipanggil illuminating
Konstytucyja_1.ttf –> dipanggil konstytucyja
OPN_StunFillaWenkay.ttf –> dipanggil stunfilla
Animal_Silhouette.ttf –> dipanggil animaldings
Terdengar mudah bukan? Mari kita coba
FLIR – newbie guide
Bahan-bahan:
- server yang bisa buat menjalankan PHP (waktu testing ini, saya pakai appserv)
- FLIR pack. Bisa didownload disini
- example.html, file html kosong yang mau diisi tulisan berbagai bentuk. Bikin sendiri.
Cara membuat:
- unzip FLIR pack, rename foldernya dengan nama facelift (bisa nama lain).
- taruh folder facelift tadi sebagai subfolder dari folder tempat example.html berada. Jadi misalnya example.html ada di folder www/, maka file-file FLIR ditaruh di www/facelift/
- Jika semua sudah siap, baru deh kita bisa panggil FLIR dengan javascript. Setelah itu, kita bisa leluasa ngoding CSS seolah fontnya sudah diinstall. Overall script:
<html>
<head>
<style>
h1{font-family: illuminating;}
h2{font-family: tribalbenji;}
h3{font-family: konstytucyja;}
h4{font-family: stunfilla;}
h5{font-family: animaldings;}
</style>
</head>
<body>
tulisan biasa tak bisa dirubah
<h1>H1 berubah</h1>
<h2>H2 berubah</h2>
<h3>H3 berubah</h3>
<h4>H4 berubah</h4>
<h5>H5 BERUBAH</h5>
<h6>H6 tak bisa dirubah</h6>
<h7>H7 tak bisa dirubah</h7>
<script language="javascript" src="facelift/flir.js"></script>
<script type="text/javascript">
FLIR.init( { path: 'facelift/' } );
FLIR.auto();
</script>
</body>
</html>
*ket: script ada di sebelum /body atau sebelum script google analytics
Hasilnya:
Belum ada informasi apakah FLIR ini sudah menggunakan GD2 atau belum. Jadi renderingnya masih kasar (as reported on nettuts+).
Tapi buat saya, yang sedikit mengganggu adalah cachingnya. Sehingga kadang kalau direfresh2 masih belum beres, folder cache mesti dikosongin. Atau textnya yang mesti diganti.
Satu lagi. FLIR ini cuma bisa merubah text yang diapit tag heading mulai H1 sampai H5. Diluar itu nggak bisa. Jadi tinggal pinter-pinternya kita aja mainin CSSnya.
Styling dengan custom font
Kalau tadi styling dengan fonts bawaan FLIR pack, kali ini kita coba styling dengan font kita sendiri. Ikuti step ini:
1. taruf fontnya di folder facelift/fonts/
2. buka facelift/config-flir.php
3. temukan baris yang seperti ini:
<?php $fonts['tribalbenji'] = 'Tribal_Font.ttf'; $fonts['illuminating'] = 'ArtOfIlluminating.ttf'; $fonts['konstytucyja'] = 'Konstytucyja_1.ttf'; $fonts['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $fonts['animaldings'] = 'Animal_Silhouette.ttf'; ?>
4. tambahkan custom font pada baris selanjutnya dengan format seperti ini:
<?php $fonts['namapanggilan'] = 'Nama_Fontnya.ttf'; ?>
5. Jika sudah, tinggal panggil lewat CSS:
h1{font-family: namapanggilan;}
Thats it. Selamat mencoba. Jangan lupa ganti tulisan atau bersihkan cache semisal direfresh-refresh nggak ada perubahan.
Punya info tambahan yang bisa dishare? Mari berbagi..
rujukan:
http://facelift.mawhorter.net/quick-start/
http://net.tutsplus.com/tutorials/php/how-to-use-any-font-you-wish-with-flir/
Postingan Terkait
5 komentar di “Styling Web Font dengan PHP FLIR (for Newbie)”
Tinggalkan Komentar
vyatri
Telah Menulis 20.
Lahir di Bontang, besar di Surabaya dan Qatar. Web programmer paling cupu dari PT.DheZign OS. Juga co-founder toko online produk muslim pertama Indonesia dengan konsep one-stop. Menggeluti linux sejak DO di semester 3 di IBMT. Sekarang sedang bercita-cita menjadi pengangguran.
Bagaimana dengan legalitasnya? Saya dengar penggunaan font-embedding masih terkendala dengan legalitas font.
Satu lagi. Meskipun menggunakan PHP tetapi Flir ini tetap memerlukan JavaScript. Percuma jika JavaScript dimatikan bagaimana dengan aksesibilitasnya?
Hmm, sepertinya mikir mikir banget nih kalau mau menggunakan FLIR
Seperti kata @ivanlaksana kayaknya ga ada yg matiin javascript deh hari gini
Why use FLIR if you can use CSS3 @font-face ?
menghargai yang browsernya masih jadul pak. Atau mengikuti permintaan klien. It depends. Yang penting kan sudah punya ilmunya dulu. Insya Allah semua web developer disini juga lebih suka pakai CSS3 @font-face . Termasuk saya
Kayaknya lebih ringan n mudah pake google font API deh. ga make resources server kita