Membuat Font Embedded Pada Browser

Halo Sobat, bertemu lagi dengan Saya. Kali ini kita akan mempelajari mengenai font embedded. Sebelumnya, apa sih font embedded itu? Font Embedded adalah font yang ditanam. Dalam kasus ini, font kita tanam pada aplikasi Web kita dengan kata lain, apabila aplikasi Web kita ingin menggunakan font sesuai keinginan kita (bukan font default).

Secara default, tiap browser memiliki font default masing masing dan tergantung juga dengan OS yang kita gunakan. Untuk lebih jelasnya, Anda dapat meilhat tabel di bawah ini :

IE

Edge

Firefox

Chrome

Safari

Sumber

Lalu, bagaimana jika Kita ingin menggunakan font (pada contoh kali ini) BetsyFlanagan? Caranya cukup mudah, kita hanya bermain menggunakan CSS. Pertama yang harus kita lakukan adalah upload font yang kita inginkan di server. Kemudian kita tulis pada CSS script sebagai berikut :

 
<style type="text/css">

    @font-face {
     font-family: contohnya; /* membuat nama font */
     src: url("/file/BetsyFlanagan.ttf") /* letak font pada server */
    }
    
    .demo {
     font-family: contohnya;/* memanggil nama variabel yang dibuat*/
     font-size: 40px; /* besar font yang digunakan*/
    }
</style>

<span class="demo">Coba Font Default</span>

 

Setelah selesai, simpan script yang telah Anda buat dan sekarang coba akses melalui browser. Lihatlah font yang ditampilkan pada browser. Mudah bukan? silahkan mencoba 🙂