Menggunakan Custom Font pada CSS

Menggunakan Custom Font pada CSS

567
0
SHARE

Halo sahabat harviacode. Bikin tulisan yang ringan-ringan dulu ya. Bagi anda yang belum tahu bagaimanancara menggunakan custom font pada CSS, silahkan simak artikel berikut ini.

Cara menggunakan custom font pada CSS

CSS3 memiliki fitur web font yaitu fitur yang mengizinkan kita untuk menggunakan font secara embed, meskipun pada sistem user belum diinstall. Untuk menggunakan web font, kita bisa menggunakan @font-face. Berikut ini adalah caranya

Setelah dideklarasikan, cara pemanggilannya cukup seperti di bawah ini.

Mudah bukan.. memang mudah, namun perlu diingat bahwa jika hanya dengan cara di atas, ada kemungkinan beberapa browser tidak mensupport font ttf. Jadi gimana dong biar bisa jalan pada semua browser? Jawabnya adalah kita perlu font dengan extensi lain. Untuk membuatnya tidak perlu pusing, karena sudah ada webfont generator online yang bisa kita gunakan secara gratis.

Webfont Generator

Silahkan googling webfont generator, maka akan muncul banyak font generator online yang bisa kita pakai. Salah satunya adalah https://www.web-font-generator.com/

Langkah-langkah penggunaan webfont generator adalah :
1. buka https://www.web-font-generator.com/
2. upload font anda (format ttf)
3. cek “I’m uploading a font that is legal for web embedding. I checked with the author and/or EULA.”
4. Klik tombol Generate web font
5. Klik download Package
6. Extract hasil download tersebut, maka akan tersedia beberapa font dengan format ttf, eot, svg dan woff. Selain itu juga tersedia contoh style.css untuk penggunaannya.

web font cssSekarang anda hanya perlu meletakkan folder font tersebut dalam project Anda, lalu ikuti contoh penggunaannya pada style.css.

Cara pemanggilannya / penggunaannya sama seperti contoh di atasnya. Sekarang font Anda bisa jalan cross browser dengan aman. Selamat mencoba.. Jangan lupa share ya. Jika ada pertanyaan jangan ragu untuk menuliskannya pada kolom komentar. Terima kasih.

Bagikan artikel ini ya.. terima kasih

NO COMMENTS

LEAVE A REPLY