[Tips]Menambahkan Font Dalam Multiply Anda

http://bimosaurus.com/2012/04/13/tips-menambahkan-font-dalam-proses-pembuatan-web

Pengin nambahin font dalam MP kita? Sayangnya, font yang ada dalam MP ini secara standard cukup terbatas. Biasanya sekitar Sans Serif, Tahoma, Arial, Verdana, Helvetica, Times, Trebuchet MS dan lain-lain.

Kadang boleh jadi kita akan menambahkan font seperti ini :

Selamat Datang

(TIDAK SEMUA BROWSER SUKSES MEMBACA INI)

namun sayangnya font tersebut tidak ada. Maka kita bisa menentukan sendiri font tersebut. Bagaimana caranya?

1. Carilah font yang anda suka di internet, dalam bentuk .ttf, misal saya mengambil dari http://www.fontspace.com/category/old%20english, download dan extractlah
2. Simpanlah dalam sebuah hosting (entah gratisan atau apa) dalam direktori font dalam aplikasi web anda, misal {direktori_utama}/themes/namathemes/font. Bisa juga cara curang, mencari web yang font tersebut telah tersedia, jadi kita tidak perlu download tapi nebeng font ke sana.
   
3. Bukalah CSS anda http://multiply.com/setup/pages/upload-css , dan masukkan kode seperti berikut dibawah

   @font-face {    font-family: 'NamaFontTerserah';    src: url('fonts/namafilefont.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

4. Anda dapat meload font tersebut baik dalam elemen langsung html seperti :

   <div style="font-family:NamaFontTerserah">INI MENCOBA</div>

   atau

   <div id="fontcoba">INI MENCOBA</div>

   dengan isi CSS

   #fontcoba{
   font-family:NamaFontTerserah;
   }

 

Sebagai contoh, saya dari situs http://www.fontspace.com/category/old%20english font-font berikut :

• Salterio Shadow
• Cloister Black
• KingThings Spike
• KingThings Spikeless
• Faith Collapsing

Saya edit css saya dengan menambahkan:

@font-face {    font-family: 'SalterioShadow';    src: url('http://bimosaurus.com/wp-content/themes/bimosaurus/fonts/salterio_shadow.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
 
@font-face {    font-family: 'CloisterBlack';    src: url('http://bimosaurus.com/wp-content/themes/bimosaurus/fonts/cloister_black.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpike';    src: url('http://bimosaurus.com/wp-content/themes/bimosaurus/fonts/kingthings_spike.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpikeless';    src: url('http://bimosaurus.com/wp-content/themes/bimosaurus/fonts/kingthings_spikeless.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'FaithCollapsing';    src: url('http://bimosaurus.com/wp-content/themes/bimosaurus/fonts/faith_collapsing.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

 

Dan selanjutnya disini saya buat :

<div style="font-family:CloisterBlack; font-size:40px; line-height:30px;"><p>Cloister Black</p></div>
<div style="font-family:KingThingSpike; font-size:40px; line-height:30px;"><p>KingThing Spike</p></div>
<div style="font-family:SalterioShadow; font-size:40px; line-height:30px;"><p>Salterio Shadow</p></div>
<div style="font-family:KingThingSpikeless; font-size:40px; line-height:30px;"><p>KingThing SpikeLess</p></div>
<div style="font-family:FaithCollapsing; font-size:40px; line-height:30px;"><p>Faith Collapsing</p></div>

Hasilnya adalah seperti berikut:

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

 

Artikel ini untuk para pemula seperti saya. Semoga bermanfaat.

PERHATIAN, TIDAK SEMUA BROWSER BISA LANGSUNG MEMBEDAKAN FONT INI

pengin lengkap ya disini

http://bimosaurus.com/2012/04/13/tips-menambahkan-font-dalam-proses-pembuatan-web