<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'/>Dengan menggunakan CSS external diatas, maka ketika website dibuka, format font akan menyesuaikan dengan berbagai peramban/browser seperti Firefox, Chrome, Safari, Internet Exploler, Android dan iOS. Sebetulnya untuk tampilan sudah tidak ada masalah dengan kode diatas.
Namun permasalahan terjadi pada blocking render CSS. Untuk menghindari blocking render CSS ini maka digunakan
@font-face. Untuk mendapatkan kode CSS nya, kita cukup ambil URL font (contoh di atas saya menggunakan Open Sans standard dan bold, copy URL dan paste di browser. Sebagai contoh kita akan copas URL ke browser : https://fonts.googleapis.com/css?family=Open+Sans:400,700,maka CSS yang kita dapatkan seperti ini :@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}Yang kita dapatkan hanyalah format
woff2 dan artinya ketika kita gunakan CSS tersebut, maka website kita tidak akan tampil sempurna di semua peramban. Bagaiamana cara mendapatkan semua format yang diperlukan?@font-face Format Fonts dan Browser yang Support
Ada beberapa format font diantaranya adalah
eot, woff2, woff, ttf dan svg. eot tidak terlalu diperlukan karena hanya support IE6 - IE9 sementara sekarang sudah IE11. Begitu pula dengan svg, hanya untuk iOS tertentu. Tetapi lebih sempurna tentunya apabila semua format kita pakai, contoh kode :@font-face {
font-family: 'MyWebFont';
src: url('url-webfont.eot'); /* IE9 Compat Modes */
src: url('url-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('url-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('url-webfont.woff') format('woff'), /* Modern Browsers */
url('url-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('url-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}Apabila kita menggunakan CSS yang kita dapatkan dari Google Fonts seperti tadi, maka kita hanya akan menggunakan format
woff2. Lihat contoh CSS dan Browser yang Support@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
}| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Tidak | 35+ | 23+ | Tidak | 37 | Tidak |
woff2 saja, tidak akan support di Safari, IE dan iOS. Kita lihat penambahan woff dan ttf.@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
woff2, woff dan ttf. Kembali lagi kepada permasalahan bagaimana cara mendapatkan semua format font yang diperlukan, sementara hanya format woff2 saja yang ada.Cara mendapatkan URL format .woff dan .ttf
Ada beberapa cara, diantaranya kita download font kemudian upload di hosting kita atau di Google Drive. Bagi yang punya hosting saya rasa tidak masalah, pagi pengguna blogspot maka alternatifnya hanya menggunakan Google Drive. Tapi lagi-lagi permasalahannya akses Google Drive agak lambat.
Saat ini saya akan share cara mendapatkan format
woff dan ttf dengan menggunakan URL dari Google Fonts. Saat ujicoba, saya menggunakan Firefox (karena Chrome error). Oke, ini stepnya :1. Gunakan peramban Firefox.
2. Install Add-on User Agen Switcher.
3. Switch / alihkan peramban ke IE
Alihkan ke Internet Exploler
4. Paste Link URL font seperti biasa, untuk
woff25. Tambah
! dibelakang URL untuk mendapat URL woff, seperti ini :https://fonts.googleapis.com/css?family=Open+Sans:400,700!6. Tambahkan kutip (
") untuk mendapat ttf. Bisa juga dengan simbollain. Silahkan dicoba.7. Let's see the magic work.. hehehe
Kalau tidak jalan, coba restart browser. Copy semua URL dan gabungkan. Contohnya seperti ini :
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzJS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype');
}Penyimpanan
Simpan CSS
@font-face di paling atas, supaya langsung dibaca oleh browser sehingga font cepat dimuat. Jangan lupa berikan font fallback dengan huruf yang standar, agar ketika font lambat dimuat maka akan ditampilkan font stack.body {font-family:'Open Sans',"Arial Narrow",Arial,Sans-Serif}Penutup
Gunakan custom font secukupnuya, semakin banyak font yang digunakan maka semakin lama pula pemutan oleh peramban. Hati-hati juga menggunakan font, karena banyak font yang berlisensi. Gunakan yang free seperti Google Fonts atau FontsSquirrel.