Generator @font-face Mempermudah Custom Font

Semenjak berkembangnya CSS 3, anda tidak perlu lagi melakukan custom font dengan javascript maupun flash. Anda dapat menggunakan embed font atau @font-face, sebagai alternatif baru yang lebih baik untuk bermain 'typography'.

Ada jasa yang dapat kita gunakan untuk memudahkan membuat @font-face, yaitu dengan @font-face Generator. Anda pun dapat memilih Free Fonts yang akan anda gunakan di fontsquirrel.com si penyedia jasa generator tersebut. Dengan generator @font-face ini kita tidak susah lagi mengkonver font dalam bentuk 'eot' untuk IE atau 'svg' untuk Chrome. Dan juga mendapatkan scriptnya yang bisa langsung kita tanam di CSS.

Tahapan Custom Font dengan @font-face

1. Pilih Font yang Anda Sukai

Pilihlah jenis font yang anda sukai di penyedia free font, termasuk di fontsquirrel.com. Yang perlu diperhatikan disini adalah yakinkan bahwa font tersebut dapat digunakan secara legal untuk sebuah web.

2. Generate Font

Masuk ke @font-face Generator. Kemudian:

• Add font.
• Contreng Agreement.
• Base Font Format, tidak perlu dirubah.
• Alt Font Formats, contreng semuanya EOT, SVG dan WOOF.
• Options dan Subsetting, tidak perlu dirubah, tapi anda bisa juga mengaturnya.
• Terakhir, download.

Seperti gambar berikut :



Extract hasil file download tersebut.

3. Membuat Folder Fonts
Buatlah folder "fonts", dan masukan semua font hasil download tersebut kedalam folder fonts.
Font tersebut ada empat buah yang memiliki akhiran:

• .eot
• .svg
• .ttf atau .otf
• .woff

Kemudian upload folder "fonts" tersebut. Misal anda pengguna Wordpress, upload folder tersebut kedalam [../wp-content/theme/NamaTheme/], hasilnya seperti demikian [../wp-content/theme/NamaTheme/fonts].

4. Memanggil Font Lewat CSS
Buka file css yang bernama stylesheet.css, hasil dari generator font yang telah anda download dengan notepad.

Copy code tersebut, misal seperti:

@font-face {
 font-family: 'GoudyBookletter1911Regular';
 src: url('GoudyBookletter1911.eot');
 src: local('Goudy Bookletter 1911 Regular'), local('GoudyBookletter1911'), url('GoudyBookletter1911.woff') format('woff'), url('GoudyBookletter1911.otf') format('opentype'), url('GoudyBookletter1911.svg#GoudyBookletter1911') format('svg');
}

Paste code tersebut kedalam file css anda, dan rubah menjadi:

@font-face {
 font-family: 'GoudyBookletter1911Regular';
 src: url('fonts/GoudyBookletter1911.eot');
 src: local('Goudy Bookletter 1911 Regular'), local('GoudyBookletter1911'), url('fonts/GoudyBookletter1911.woff') format('woff'), url('fonts/GoudyBookletter1911.otf') format('opentype'), url('fonts/GoudyBookletter1911.svg#GoudyBookletter1911') format('svg');
}

Jadi tambahkan fonts/ disetiap url untuk memanggil font yang berada di "folder fonts".

Nah sekarang, misal anda ingin menggunakan custom font tersebut di h1, maka panggil nama font tersebut, seperti berikut:

h1{
   font-family: 'GoudyBookletter1911Regular', serif;
}

Hasil dari penggunaan 'Generator @font-face' ini dapat anda lihat di Id Tutorial pada judul postingan.

Penutup

Sip demikian keseluruhan tahapan 'Custom Font' dengan '@font-face' CSS tersebut. Kembangkan lah font tersebut sehingga 'Typography' pada weblog anda semakin baik.