Font yang menjadi standar digunakan browser sangat terbatas. Di samping itu tampilan juga bisa bervariasi dari satu device kepada device yang lain. Untuk mengatasi ini pada CSS3 dikembangkan teknologi yang memungkinkan kita menampilkan font di luar operating system dan juga di luar dari web browser.
Kita dapat menggunakan @font-face dengan contoh coding seperti:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Font lain di CSS3</title>
<style type=”text/css”>
@font-face
{
font-family: Abscissa;
src: url(‘./fonts/Abscissa.eot’);/*untuk ie*/
src: local(‘Abscissa’),url(‘./fonts/Abscissa.ttf’) format(‘truetype’);
}
h1
{
font-family: Abscissa;
}
</style>
</head>
<body>
<h1>Great is Thy faithfullness</h1>
</body>
</html>
Pada contoh di atas kita menggunakan font Abscissa yang didownload dari http://www.1001freefonts.com.
Untuk IE (Internet Explorer) kita perlu melakukan convert dari TTF (True Type Font) ke Opent Type Font (EOT).
Untuk melakukan TTF ke EOT silahkan mengunjungi http://www.kirsle.net/wizards/ttf2eot.cgi .
Hasil dari coding di atas dapat dilihat di http://aris.proweb.asia/font_lain_di_css3.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.