CSS3 - @font-face untuk Menambah Jenis Font pada Website

Pada CSS3 terdapat query @font-face yang memungkinkan desainer web untuk menggunakan beragam font diluar web safe fonts (font umum website). Desainer hanya perlu menyimpan file font (.ttf , .otf, dll) pada server atau di direktori file website jika offline. Kemudian memanggil nama file font tersebut melalui CSS dan tinggal menggunakan. Berikut langkahnya.


copy file font (.ttf , .otf, dll) ke direktori web Anda, misal dimasukkan dalam folder fonts. Atau untuk lebih mudahnya saya petakan letak file-file website seperti berikut.

index.html => website/index.html
style.css => website/style.css
gisha.ttf => website/fonts/gisha.ttf

Kemudian tambahkan script berikut pada file css-nya.

@font-face {font-family : fonttambahan; src : url('fonts/gisha.ttf');}

@font-face merupakan script untuk penambahan font. fonttambahan adalah pemberian nama font yang kita tentukan untuk digunakan ketika pemanggilan jenis font. Di dalam src merupakan direktori dimana kita menyimpan file gisha.ttf terhadap file css-nya yaitu style.css. Dari url tersebut berarti memasuki folder fonts kemudian memanggil file gisha.ttf.

Untuk menggunakannya sangat mudah, tinggal menyebutkan nama font yang telah kita tentukan di dalam property font-family.

.font-baru {font-family : fonttambahan; font-size : 12px; font-weight : normal;}

Dari script di atas kita membuat clas bernama font-baru. Dan kita menggunakan font-family nya adalah fonttamabahan, yang merupakan jenis font yang kita buat sendiri. Maka teks di dalam class font-baru pun jenis font nya adalah gisha.

Sekiranya sudah cukup tutorial penambahan jenis font di website dengan CSS3 atau aturan font face dari saya. Jika masih bingung silakan komentar. Semoga bermanfaat :)