Menggunakan @font-face untuk Google Fonts

Untuk mempercantik tampilan website biasanya kita menggunakan custom font. Ada beberapa penyedia custom font dengan lisensi gratis, diantaranya adalah Google fonts. Untuk menggunakan google fonts, biasanya kita menggunakan pemanggil CSS external seperti ini :

<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

Maka apabila menggunakan 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+

Dari data Browser Support di atas, maka agar tampilan sempurna di berbagai peramban, kita harus menggunakan 3 format font, yaitu 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


4. Paste Link URL font seperti biasa, untuk woff2
5. 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.