Cara Membuat Font Yang Indah Dengan Web Font.™ ~ Ada Nggak

Font bisa dibuat lebih indah dan penuh gaya, tergantung type font apa yang diinstal ke dalam blog. Jika ingin membuat tulisan dengan bentuk yang berbeda dari font yang standard digunakan instal satu jenis atau beberapa type font ke dalam blog agar tampilan tulisan lebih menarik. Untuk mencoba beberapa jenis font, bisa dilihat koleksi type web font di tulisan saya sebelumnya. Dan hanya satu cara untuk mengetahui tulisan mana yang pantas digunakan, yaitu dengan mencobanya satu persatu

Berikut ini beberapa contoh aplikasi web font pada blog:

Ostrich Sans

by Tyler Finck

Contoh penggunaan font web Ostrich Sans:

Calligraffiti

by Open Window

Contoh penggunaan web font Calligraffiti:

Francois One

by Vernon Adams

Contoh penggunaan web font Francois One:

Brawler

by 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.ubuntu.com/Ubuntu-R.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-variant: normal;

  font-stretch: normal;

}@font-face {

  /* Bold */

  font-family: "UbuntuBold";

  src: url("http://font.ubuntu.com/Ubuntu-B.ttf") format("truetype");

  font-weight: 700;

  font-style: normal;

  font-variant: normal;

  font-stretch: normal;

}@font-face {

  /* BoldItalic */

  font-family: "UbuntuBoldItalic";

  src: url("http://font.ubuntu.com/Ubuntu-BI.ttf") format("truetype");

  font-weight: 700;

  font-style: italic;

  font-variant: normal;

  font-stretch: normal;

}@font-face {

  /* Italic */

  font-family: "UbuntuItalic";

  src: url("http://font.ubuntu.com/Ubuntu-I.ttf") format("truetype");

  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:

<head>

>b:include data='blog' name='all-head-content'/>

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!

Sumber:http://internetwebsitedesign.biz dan web lainnya.

Post title : Cara Membuat Font Yang Indah Dengan Web Font.™
URL post : https://adanggak.blogspot.com/2011/09/cara-membuat-font-yang-indah-dengan-web.html