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.
 |
| Gambar 1.1 Format Font Source: w3schools.com |
- Cloud Typography
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotheque
- Fonts.com
- Google Fonts
- Font Squirrel
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
- Download font alex brush sebagai contoh di fontsquirrel.com.
Gambar 1.2 Download Font - Extract font tersebut, lalu satukan folder bersama html seperti pada gambar
Gambar 1.3 Satukan folder font dan file html - lalu ini isi font-face.html nya
<!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>- Mari kita coba
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
 |
| Gambar 1.5 Pilih Generator |
 |
| 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