Cara Penggunaan @font-face CSS Pada Website - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Monday, August 14, 2017

Cara Penggunaan @font-face CSS Pada Website

bewoksatukosong.com | Hello balik lagi dengan om bewok, kali ini om bewok akan memberikan "Cara Penggunaan @font-face pada website". Sebenernya teknik ini dikeluarkan pada saat css 3, jadi dulu belum ada bro.
Sebenernya apa sih bedanya sama cara penggunaan  yang terdahulu ?
Kalau dulu, misalnya ingin menggunakan font, ya tinggal pake font-family masukin deh, atau misalnya di pc kamu ga ada font tersebut tinggal install tapi kekuranganya kalau client atau user lain ga ada font nya gimana ? otomatis font tersebut tidak akan berkerja dengan baik (ga bisa lah pokoknya). 
Tapi kan google font bisa di gunakan secara online ? nah iya betul tapi terkadang ada beberapa font yang tidak ada di font google, nah ini dia manfaat pengunaan dari @font-face ini.
Ada beberapa format font yang dapat digunakan oleh teman - teman. 
Cara Penggunaan @font-face CSS Pada Website
Gambar 1.1 Format Font Source: w3schools.com
Oh iya kalau kamu ingin download font bisa lihat di bawah ini. bagus - bagus loh tapi yang sering om bewok gunakan yaitu fontsquirrel.com



Oke om bewok akan memberikan syntax dasarnya terlebih dahulu biar teman - teman disini paham.

Sintaks dasar 


@font-face {
font-family : "terserah namanya";
src:url('masukinNamaFileFont.woff');
}

h1 {
  font-family: "terserah namanya";
}

Oke  mari om bewok kasih tau step by step dari download font sampai menggunakan font tersebut let's go

  1. Download font alex brush sebagai contoh di fontsquirrel.com. 
    Cara Penggunaan @font-face CSS Pada Website
    Gambar 1.2 Download Font
  2. Extract font tersebut, lalu satukan folder bersama html seperti pada gambar 
    Cara Penggunaan @font-face CSS Pada Website
    Gambar 1.3 Satukan folder font dan file html
  3. lalu ini isi font-face.html nya 
  4. <!DOCTYPE html>
    <html>
    <head>
     <title></title>
     <style>
     
      @font-face {
          font-family: 'Alex Brush';
          src: url('AlexBrush-Regular.ttf');
          font-weight: normal;
          font-style: normal;
    
      }
      h1 {
       font-family: "Alex Brush";
      }
     </style>
    </head>
    <body>
    <h1>hello nama saya om bewok</h1>
    </body>
    </html>
  5. Mari kita coba 
    Cara Penggunaan @font-face CSS Pada Website
    Gambar 1.4 Hasil ketika menampilkan di chrome
CTT : Untuk font-family kamu bebas nulis apa aja yang terpenting kalau di bagian @font-face di font-family kamu tulis : "om bewok ganteng", berarti di font-family yang ingin kamu gunakan font tersebut berarti font-family nya : "om bewok ganteng".

Cara Convert otf ke woof

Cara Penggunaan @font-face CSS Pada Website
Gambar 1.5 Pilih Generator

Cara Penggunaan @font-face CSS Pada Website
Gambar 1.6 Upload font yang ingin kamu convert
Semoga bermanfaat buat teman - teman yang masih belum mengerti mengenai @font-face css pada website, semoga kita bisa melanjutkan tutorial yang lain yang sudah lama tidak diupdate ya... 

No comments:

Post a Comment