Post Detail

Cara Load Font di CSS Menggunakan Fontface

by Admin
22 December 2022
304 views

Salah satu component terpenting dalam web base adalah CSS atau cascading stylesheet yang dimana difungsikan untuk mempercantik sebuah website. Jika kalian menjadi full stack developer maka pengetahuan tentang css harus punya juga. Langsung saja ya dalam artikel kali ini saya akan membuat artikel cara load font atau tulisan dalam sebuah web base yang dimana kalo kita ingin mempercantik website font ini penting juga. Kenapa font harus di load juga ya ? karena kalo kita hanya dipersonal laptop kita yang install font maka ketika user/public ketika akses website kita maka tidak akan terload fontnya, nah itu karena tidak diload di websitenya. Di CSS ada yang namanya syntak atau code

@font-face

Fontface ini adalah syntak css baru, yang membedakan jika kita menggunakan fontface maka kita perlu mengupload fontnya contohnya saya akan load font.

Disini kita akan meload font Montserrat contoh codingannya.

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype'),url('fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Dengan codingan pendek diatas maka kita sudah meload font monserrat dan kelebihannya teman - teman dengan kodingan diatas maka walaupun nanti user/public nanti akses website kita tidak perlu ada font dilocal laptop mereka. Tapi tidak berhenti disana fontnya harus kita panggil berdasarkan element yang akan kita gunakan font tersebut contoh kita akan menggunakan di class css.

.breadcrumb li{
    color:#fff;
    font-size:14px;
    font-family:'Montserrat',serif; 
    display: inline-block; 
    position: relative; 
    padding-right: 16px;
}

Maka kalo kita memanggil class .breadcrumb akan terload font Monserat begitulah kira-kira sedikit technology yang saya ketahui tentang css ( cascading stylesheet ), ada beberapa yang saya lakukan untuk memastikan font terload atau tidak karena font montserrat ini mirip seperti font normal