Belajar Cara Font Embedding Pada HTML
Pada sebelumnya, Belajar Komputer sudah memposting bagaimana cara menggunakan salah satu fitur dari Google yaitu Google Font yang bisa diterapkan di blog atau web pribadi. Dengan Google Font tersebut kita bisa mengubah tampilan tulisan yang ada di blog atau website kita dengan mengubah jenis font yang akan digunakan. Jadi tulisan semakin unik karena tulisan tersebut menggunakan font yang berbeda dengan font yang sering digunakan dalam pembuatan web.
Namun, jenis font yang ada dalam Google Font tersebut hanya sedikit. Jadi kesulitan untuk mengekpresikan tulisan di blog atau website kita dengan font yang lebih unik. Jika dilihat, font yang ada pada Google Font tersebut sama saja bentuknya dengan font yang biasa digunakan dalam pembuatan web. Pada saat ini saya akan menjelaskan bagaimana caranya untuk membuat tulisan pada blog dengan koleksi font sendiri.
Untuk persiapan, maka download dahulu tool converter font .ttf ke .eot . Dikarenakan Internet Explorer tidak akan membaca font jenis .ttf di halaman page tetapi hanya font berjenis .eot. Berikut link untuk mendownload tool tersebut.
Sesudah itu langsung ekstrak file zip tersebut. Di dalamnya terdapat file ttf2eot.exe. Copykan file tersebut ke C:\WINDOWS\System32. Setelah dicopy , persiapkan font yang akan digunakan untuk tulisan tersebut. Untuk mempermudah copykan dulu font tersebut ke C atau D, karena kita akan menggunakan Command untuk mengubah font tersebut menjadi jenis .eot
Buka menu Run, lalu CMD dan ok. Setelah Command Prompt telah terbuka, ketikkan
ttf2eot<spasi>letak_dan_nama_font<spasi>tempat_dan_nama_hasil_pengubahan
contoh ttf2eot<spasi>C:\Jokerman.ttf<spasi>C:\Jokerman.eot
Jika sudah, maka ambil font hasil konversi tersebut, tergantung anda menulis tempatnya dimana. Seperti saya C:\Jokerman.eot. berarti saya menyimpannya di C:. Ambil juga font ttfnya.
Setelah dua font itu diambil, maka lanjut ke cara memasukkannya ke style dan html. Untuk sekang saya akan menjelaskannya pada file html saja. Tetapi cara tersebut bisa diapplikasikan di blog atau website.
Pertama, seperti biasa buat file html terlebih dahulu dengan bantuan dreamweaver atau software lainnya. Jika tak ada maka buat saja di notepad dan copy paste script berikut.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head><body>
</body>
</html>
Cara untuk memasukkan font tersebut ke html, maka ada style khusus untuk memasukkannya. yaitu:
<style>
@font-face {
font-family: Jokerman;
src: url(jokerman.eot);
src: url(jokerman.ttf);
}
h2 {
font-family: "Jokerman";
font-size:72px;
}
</style>
Copy dan pastekan diantara tag <head> dan </head>. Untuk url(jokerman.ttf) dan url(jokerman.eot) ganti dengan url(namafontanda.ttf) dan url(namafontanda.eot). Juga dengan Font Familynya untuk menemukan nama aslinya dapat dilihat dengan membuka file font ttfnya. Ganti Jokerman pada font family tersebut dengan nama asli font anda.
Jika sudah maka lanjut ke tahap pengapliaksian font terhadap tulisan. Sebagai contoh saya menggunakan h2 (Heading type 2) yang akan diberi font Jokerman tersebut. Atau anda bisa ganti dengan class atau id yang lainnya. Dan pada font size, ganti dengan ukuran font yang anda inginkan.
<h2>Lorem Ipsum</h2>
Copy pastekan script tersebut diantara tag <body> dan </body> Maka hasil keseluruhan script adalah
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@font-face {
font-family: Jokerman;
src: url(jokerman.eot);
src: url(jokerman.ttf);
}
h2 {
font-family: "Jokerman";
font-size:72px;
}
</style>
</head><body>
<h2>Lorem Ipsum</h2>
</body>
</html>
Pastikan font yang tadi berada satu folder dengan file html tersebut. Dan hasil jika dilihat di web browser adalah
3 Comments