Web Font dengan CSS @font-face

Para web designer biasanya sangat teliti soal design, konten & font. Dalam sebuah design template, element website yang dibuat ada yang bersifat statis & dinamis. Gambar, warna, ukuran adalah element yang bersifat statis, karna biar bagaimanapun, template gambar tetap tidak akan berubah, begitu juga warna & ukuran.

Namun didalam sebuah design template, ada 1 element paling mendasar yang memiliki sifat dinamis karena akan terus mengikuti banyaknya konten: font. Pada dasarnya, sebuah font didalam template akan mengikuti system font yang ada di komputer user. Namun bagaimana jika web designer menggunakan font langka yang tidak dimiliki oleh komputer user? KG Second Chances Sketch atau PT Sans contohnya, font akan menggunakan default browser font.

Untuk itu, web designer perlu menyertakan fontnya dengan membuat selectors @font-face di CSS agar dapat digunakan di semua halaman web.

Untuk membuatnya, sertakan selectors @font-face di CSS Anda:

CSS

Penggunaan

Keterangan

  • font-family: Membuat nama font baru dengan nama Anda sendiri, sebagai contoh: TestFont, maka nama ini yang akan digunakan di setiap font-family di halaman web Anda.
  • src: Tautan font yang mengarah ke direktori dimana anda menyimpan file font
  • font-weight: Ketebalan font
  • font-style: Style font: normal, italic, oblique

Keterangan property lengkapnya bisa dilihat disini.

Selamat mencoba 🙂

Content Protection by DMCA.com