Font Face Pada CSS3
Font Face Pada CSS3 - @font-face adalah property CSS3 yang berfungsi untuk mengelola font pada CSS3 untuk halaman website. Sebelum ada CSS3 untuk mengelola font pada CSS kita menggunakan ‘font-family’ yang merupakan bagian dari property CSS1. Namun penggunaan font family memilki keterbatasan karena hanya terbatas pada jumlah font yang ada sistem operasi perangkat kita saja.
Sebelum lebih lanjut membahas bagaimana CSS mengelola font dalam website kita menggunakan menggunakan property CSS3 @font-face, terdapat baiknya kita review lagi mengenai bagaimana CSS1 atau CSS dasar mengelola font pada sebuah laman website supaya kita pula sanggup membandingkan antara penggunaan font dalam CSS1 & font dalam CSS3.
Penggunaan font pada CSS sebelum adanya CSS3 kita bisa menggunakn 2 teknik sebagai berikut :
1. Property CSS font-family
Sebelum terdapat CSS3 buat mengelola font dalam CSS kita memakai ?Font-family?. Ketika kita menggunakan font-family kita bisa memberi beberapa option pilihan font buat mampu dipakai dalam page website seperti model gambar di atas. Gambar di atas menjelaskan bahwa kita meminta CSS buat mencarikan font jenis Arial Rounded MT Bold dalam sistem operasi user/client. Sedangkan buat dua jenis font setelahnya merupakan fallback font atau font cadangan jika font utama tidak ditemukan pada sistem operasi user. Dari contoh di atas maka CSS akan mencari font jenis arial pada sistem operasi user, jika font jenis Arial Rounded MT Bold tidak ditemukan. Kalau font jenis arial nir ditemukan pula, maka CSS akan mencari kategory font ?Sans-serif?. Perlu dicatat bahwa sans-serif bukanlah jenis font, namun sans serif adalah kategori font yg memiliki ciri tidak memiliki kaki.
Suatu jenis font nir ditemukan dalam sistem operasi user sanggup karena beberapa karena tidak hanya karena memang jenis font tersebut tidak ada pada sistem operasi user, mampu saja karena developer keliru tulis dalam code editornya.
Jadi sangat krusial kita memilih font yg sine qua non dalam sistem operasi user supaya website kita bisa diakses sang user menggunakan baik. Pastikan kita menentukan font yang memang benar-sahih mampu dipastikan terdapat di personal komputer user dalam umumnya. Jangan pernah mengasumsikan bahwa font yg terdapat pada sistem operasi kita pasti terdapat pada sistem operasi user lain, karena hal itu keliru akbar yg nantinya sanggup berimbas pada akses website kita. Kita nir sanggup memaksa user memakai font yang harus sama dengan sistem operasi kita, namun kita bisa menyesuaikan dengan pikiran dan naluri kita sebagai web developer buat menentukan font pada laman website kita sehingga bisa diakses sang orang-orang yang berkepentingan. Jadi pastikan saat mengelola font dalam laman website & menggunakan property CSS font-family maka font tersebut sine qua non pada sistem operasi user.
Dua. Google Font
Jika kita ingin menggunakan font yang tidak sinkron dan rupawan, tanpa kita wajib repot memikirkan sistem operasi personal komputer user/client punya atau nir font tadi, maka usahakan kita sanggup memakai Google Font. Google Font merupakan fasilitas yg dimiliki sang Google menjadi raksasa search engine ketika ini. Jadi saat Google memfasilitasi penyediaan font tersebut, pastinya akan selalu sanggup dibuka pada seluruh platform web browser. Sehingga kita tidak perlu risi baik kita ataupun user pasti sanggup mengakses website yang menggunakan font menurut Google Font. Buat memakai google font, silakan ikuti panduan dibawah ini :
→ Kunjungi website resminya : https://fonts.google.com
? Selanjutnya kita tinggal pilih font yang kita pakai dengan menekan icon plus ( ) pada font yg ingin kita pakai.
? Untuk menggunakan google font ini kita diberikan dua option buat menentukan tekniknya :
1. Standar, ketika kita memilih standar pastikan ada koneksi internet. Lalu kita copy paste script link yang ada pada option standar di dalam tag <head> dengan menggunakan tag <link>. Selanjutkan kita isi nilai/value font-family yang ada pada property CSS baik didalam file CSS yang terpisah atau pun didalam tag <style> sesuai dengan nama font yang kita gunakan pada Google Font.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Font</title> <link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet"> <style type="text/css"> h1 { font-family: 'Chilanka', cursive; font-size: 12px; text-align: center; } </style> </head> <body> </body> </html>
2. Import, ketika kita ingin menggunakan Google Font secara offline atau ketika tidak ada koneksi internet. Untuk hal tersebut, maka kita bisa download terlebih dahulu.
@font-face pada CSS3
Jenis font yang ada pada Google Font sangatlah banyak dan bervariasi. Tapi bagaimana kalau dari jumlah font yang banyak tersebut masih tidak ada yang sesuai dengan kebutuhan dan keinginan kita. kita bisa saja mencari jenis font dari sumber lain seperti dari website lain. pada saat itu lah property @font-face akan sangat membantu kita mengelola font untuk halaman website.
Untuk menggunakan property CSS3 @font-face kita bisa menggunakan sintak lengkapnya seperti pada gambar dibawah. Di dalam sintak tersebut pada baris pertama ada nilai atau jenis font-family yang akan digunakan. Selanjutnya lengkapi sumber dari lokasi file tersebut dengan menggunakan src dari letak url() file font tersebut beserta formatnya. Sumber src boleh lebih dari satu sumber seperti contoh gambar di bawah. Hal itu bisa terjadi apabila kita memiliki lebih dari satu type font. Hal tersebut juga bukanlah masalah apabila kita hanya memiliki satu jenis font juga. Dari penjelasan tersebut pastinya untuk menggunakan @font-face pada CSS3 kita harus memiliki dulu jenis font yang ingin kita gunakan, namun tidak ada pada Google Font ataupun pada sistem operasi perangkat komputer kita yang sesuai dengan yang kita inginkan.
Untuk mendapatkan jenis font yang sesuai dengan kebutuhan dan keinginan kita, kita juga harus perhatikan typenya. Karena setiap font memiliki type yang berbeda maka format fontnya juga berbeda, begitu juga dengan dukungan setiap browser pada masing-masing type font. type font berdasarkan formatnya ada 5 jenis, yaitu :
● TTF/OTF ( True Type Format / Open Type Format ) adalah jenis format font standar yang bisa digunakan hampir di semua browser kecuali pada iphone.
● WOFF ( Web Open File Format ) adalah jenis format font yang dibuat secara spesifik untuk kebutuhan website. Jenis format font ini sebenarnya jenis TTF/OTF yang sudah dikompres. Sehingga loadingnya lebih cepat dibandingkan jenis font OTF/TTF. WOFF dikembangkan oleh Mozilla.
● WOFF2 ( Web Open File Format 2 ) adalah jenis format font WOFF versi ke 2. Jenis format font ini lebih responsif dibanding versi sebelumnya, namun tidak semua browser mendukung jenis format font WOFF2.
● SVG adalah jenis format font yang hanya bekerja pada iphone dan ipad.
● EOT ( Embedded Open Type ) adalah jenis format font yang hanya bisa bekerja pada browser Internet Explorer.
Perhatikan list support browser untuk masing-masing type format font di bawah ini. Ada jenis format font yang disupport oleh semua browser, ada juga jenis format font yang tidak disupport oleh semua browser. Untuk jenis TTF/OTF dan WOFF adalah jenis format font yang disupport oleh semua browser. Sedangkan untuk WOFF2, SVG, EOT tidak disupport oleh semua browser. Tipe format font TTF/OTF merupakan jenis format font standar. Sedangkan untuk format font WOFF adalah jenis format font yang dikhususkan untuk kebutuhan website. Jadi ketika kita membuat website dengan menggunakan type format font TTF/OTF, maka proses loadingnya untuk menampilkan font jenis format tersebut akan lebih lambat dibandingkan kita menggunakan jenis format font WOFF, karena type format font TTF/OTF tidak spesifik dibuat untuk kebutuhan website.
Setelah kita memiliki jenis font yang ingin kita gunakan, simpan saja file font tersebut kedalam folder website kita. Selanjutnya pada bagian paling atas file CSS setelah reset CSS kita bisa tuliskan property @font-face tersebut. atau apabila tidak ada reset CSS kita bisa langsung tuliskan saja property @font-face tersebut di bagian paling atas CSS seperti di dalam tag <style> atau file CSS yang terpisah. Lalu selanjutnya kita tinggal beri font-family yang ada pada style tersebut ganti dengan nama font yang sesuai dengan penggunaan pada property @font-face.
Untuk mendapatkan suatu jenis font, kita bisa mendapatkannya dari layanan/sumber website lain. terutama yang khusus menyediakan jenis font, baik yang berbayar atau pun yang gratisan. Untuk menggunakan jenis font tertentu kita juga harus perhatikan apakah font tersebut memiliki license atau bisa digunakan untuk kebutuhan website atau tidak. Berikut referensi website untuk download jenis font :
● https://www.fontsquirell.com
● dll
Untuk mendapatkan suatu jenis font dari website-website tersebut, caranya hampir sama. silakan ikuti langkah berikut :
→ Buka salah satu link website di atas.
→ Pilih font yang diinginkan. Perhatikan peruntukan setiap jenis font baik itu untuk peruntukan kebutuhan commercial seperti untuk dekstop, tablet, hp, dan website. Pastikan font yang dipilih untuk kebutuhan website. Font yang diperuntukkan untuk kebutuhan dekstop, biasanya digunakan seperti untuk kebutuhan pembuatan laporan, design grafis, penulisan, dan lain sebagainya. Sedangkan font yang diperuntukkan untuk kebutuhan tablet biasanya digunakan untuk membuat file pdf. Lalu kalau untuk kebutuhan hp, biasanya font tersebut digunakan untuk kebutuhan pembuatan aplikasi mobile. Pastikan font tersebut berformat WOFF atau WOFF2. Kalau jenis format font tersebut bukan WOFF atau WOFF2, melainkan OTF/TTF, sebaiknya lakukan rubah dulu jenis format font tersebut dengan menggunakan Web Font Generator seperti yang dimiliki FontSquirel.
→ Download font yang diinginkan sampai selesai.
→ Setalah proses download, extract file hasil download tersebut. Ambil file fontnya saja. Silakan baca untuk catatan Licensed-nya yang biasanya ada sekaligus pada file hasil download tersebut. Licensed tersebut memberitahu kita, font tersebut bisa digunakan untuk kondisi apa saja.
→ Tempatkan file font tersebut di folder yang sama untuk membuat halaman website, atau folder mana saja yang memudahkan untuk dipakai.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Font</title> <style type="text/css"> @font-face { font-family: "Chilanka"; src: url('Chilanka-Regular.ttf') format('truetype'); } h1 { font-family: "Chilanka", arial; font-size: 12px; text-align: center; } </style> </head> <body> <h1>Hellow World !</h1> </body> </html>
Catatan saya mengenai property CSS3 @font-face ini sekian dulu. semoga dapat dimengerti bagi yang membacanya. Dibawah ada beberap jenis font berformat WOFF yang bisa didownload. Silakan bagi yang membutuhkan bisa langsung didownload.
Happy blogging guys 😉😊😉😊 .....
Belum ada Komentar untuk "Font Face Pada CSS3"
Posting Komentar