[Tips] Menambahkan Font dalam Proses Pembuatan Web

Font, dalam dunia IT ternyata menjadi sangat penting. Pemilihan font atau jenis huruf, dipandang dapat mempengaruhi pembaca, dan dapat menunjukkan karakter pemilik font. Alangkah baiknya jika sebuah perusahaan memiliki font sendiri, dengan demikian karakter dari perusahaan atau komunitas dan lain sebagainya, dapat dibaca dari corak font yang digunakannya.

Pembuatan proposal, laporan dan lain-lain, ternyata membutuhkan perhatian juga pada Font. Beberapa teman dari kalangan Institut seni kadang malah menelaah tentang font tersebut kadang memang justru bisa berpengaruh pada kelelahan mata, pada sikap dan lain sebagainya.

Dalam dunia web, dalam web profil misalnya, Font akan menjadi penting bagi pembentukan image karakter perusahaan tersebut. Sayangnya, font yang ada dalam dunia web 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

namun sayangnya font yang digunakan terbatas. 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 direktori font dalam aplikasi web anda, misal {direktori_utama}/themes/namathemes/font
  3. Bukalah CSS anda, 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 :
    INI MENCOBA

    atau

    INI MENCOBA

    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('fonts/salterio_shadow.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

@font-face {    font-family: 'CloisterBlack';    src: url('fonts/cloister_black.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpike';    src: url('fonts/kingthings_spike.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpikeless';    src: url('fonts/kingthings_spikeless.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'FaithCollapsing';    src: url('fonts/faith_collapsing.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

 

Dan selanjutnya disini saya buat :

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

Hasilnya adalah seperti berikut:

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

 

Artikel ini untuk para pemula seperti saya. Semoga bermanfaat.

One thought on “[Tips] Menambahkan Font dalam Proses Pembuatan Web

Leave a Reply

Your email address will not be published. Required fields are marked *