Menggunakan Custom Font Pada Website Dan Blog


Sekarang kita tidak perlu lagi terpaku untuk menggunakan web-safe font pada website kita, kita bisa menggunakan custom font baik yang kita download maupun dihosting oleh website lain dengan demikian kita bisa menggunakan berbagai macam font untuk website atau blog kita tanpa perlu khawatir font tersebut tidak muncul bila dibuka oleh pengguna yang tidak memiliki font tersebut.

Meskipun kita bisa menggunakan font yang dihosting oleh website lain, tetapi lebih baik bila kita menggunakan font yang dihosting oleh kita sendiri, karena itulah penggunaan custom font sebisa mungkin menggunakan website atau blog yang kita hosting sendiri supaya bisa leluasa menambahkan font atau file lain sesuai kebutuhan website atau blog kita.

Upload file font dalam directory website

Untuk bisa menggunakan custom font pada website atau blog pertama kita perlu mengupload font tersebut dalam directory hosting kita, misalnya dalam folder tersendiri. Buat sebuah folder dengan nama -misalnya- fonts.

Biasanya pada : /public-html/fonts

Kode CSS untuk bisa menggunakan custom font

Untuk bisa menggunakan custom font, kita perlu memberikan nama untuk font tersebut serta alamat dimana font tersebut tersimpan untuk bisa dimuat oleh browser. Untuk itu kita gunakan kode berikut dalam CSS :

@font-face {
font-family: myFont;
src: url(“http://alamatwebsite.com/fonts/file.ttf”);
}

pada contoh kode CSS di atas file tersimpan pada alamat directory /public-html/fonts dengan nama file file.ttf.

Hanya dengan dua kode di atas kita sudah bisa menggunakan custom font yang ingin kita gunakan seperti menggunakan font biasa dengan myFont sebagai nama fontnya.

misalnya :

p {
font-family: ‘myFont’;
}

atau :

#tulisan {
font-family: ‘myFont’;
}

bila digunakan untuk elemen dalam tag yang memiliki id=’tulisan’, misalnya di dalam div ( <div id=’tulisan’> </div> )

Perhatian: gunaan tanda petik tunggal pada font-family.

Beberapa hal yang perlu diperhatikan dalam penggunaan custom font seperti di atas :

  1. Tidak semua browser mendukung font eksternal berformat ttf, misalnya Internet Explorer.
  2. Terkadang ada beberapa font yang tidak bisa digunakan dengan cara di atas sehingga yang dimunculkan pada browser adalah web-safe font yang sejenis.

Dengan menggunakan metode di atas kita bisa menampilkan custom font meskipun pada komputer pengguna font tersebut tidak terinstall.


Dipublikasikan oleh theangelwing dalam kategori Website pada tanggal Feb 04, 2016
Tags : , , ,


www.000webhost.com