Berikut ini beberapa contoh aplikasi web font pada blog:
Ostrich Sansby Tyler Finck Contoh penggunaan font web Ostrich Sans:  |
Calligraffitiby Open Window Contoh penggunaan web font Calligraffiti:  |
Francois Oneby Vernon Adams Contoh penggunaan web font Francois One:  |
Brawlerby Cyreal Contoh pengunaan font web brawler:  |
Cara Menginstall Web Font Ke Blog.
Cara Pertama: Dengan membuat tautan bersama kode css, contohnya:
@font-face {
/* Regular */
font-family: "UbuntuNormal";
src: url("http://
font-weight: 400;
font-style: normal;
font-variant: normal;
font-stretch: normal;
}@font-face {
/* Bold */
font-family: "UbuntuBold";
src: url("http://
font-weight: 700;
font-style: normal;
font-variant: normal;
font-stretch: normal;
}@font-face {
/* BoldItalic */
font-family: "UbuntuBoldItalic";
src: url("http://
font-weight: 700;
font-style: italic;
font-variant: normal;
font-stretch: normal;
}@font-face {
/* Italic */
font-family: "UbuntuItalic";
src: url("http://
font-weight: 400;
font-style: italic;
font-variant: normal;
font-stretch: normal;
}
Cara ini menggabungkan url dari type font, dalam hal ini font Ubuntu ke dalam kode css tulisan blog. Cara ini bisa di gunakan ke dalam tulisan dengan membuat kode <style type="text/css"> di awal kode css dan ditutup dengan >/style> di akhir kode css.
Cara Kedua:Menginstall font ke dalam skin head blog. Caranya dengan menempatkan kode seperti ini:
ke dalam head. Bisa dengan mudah menemukannya di awal template blog. Paste kode di atas persis dibawah kode berikut ini:
Jika ingin mengutak-atik jenis font web agar sesuai selera, caranya mudah. Kita hanya cukup mengganti font yang bertuliskan Merah yaitu font Calligraffitti dengan font yang lain. Misalnya Allan, Ubuntu, Brawler, Francois One, gentiumbasic, Vibur, wireone, dan lain-lain. Komplitnya kode itu bisa dilihat di Daftar Web font Silahkan di klik.
Setelah itu tinggal menambahkan nama font type web font itu ke dalam css yang akan digunakan. Jika ingin mengaplikasikan web font untuk merubah bentuk header, header sidebar, font body, tinggal menambahkan nama itu ke awal css.
Agar lebih jelas, silahkan login ke web blog anda dan buka template, edit template. sebelumnya jangan lupa untuk menyimpan template anda terlebih dahulu untuk menghindari salah pengeditan.
Contohnya penggunaan web font ke dalam header seperti ini:
#header h1 {margin:15px 0 0;padding:10px 0 0;line-height:1.2em;font:normal normal 40px 'Ubuntu', Arial,Verdana,Sans-serif,'Trebuchet MS',Trebuchet;color:#333;text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);}
Cukup mudah bukan? Jadi selamat mengutak-atik font blog anda!
. Oke, mari kita lanjut dengan cara menggunakannya pada area posting.
