Ditulis oleh: Ditulis pada: 11/01/2015
Ada beberapa cara untuk mengatasi blocking render css dari Google Font di antaranya dengan memuat font secara asynchronous dan dengan menggunakan @font-face. Nah kali ini kita akan menggunakan @font-face dengan menyimpan sendiri web fonts yang digunakan di Google Drive.Untuk menggunakan web fonts dengan @font-face dan meng-hosting sendiri fonts-nya di Google Drive, kita akan menggunakan @font-face pada postingan di link di bawah ini.
Baca lagi: Solusi Render-blocking Web Font Wordpress Self Hosted
Seperti yang sudah saya bahas pada link postingan di atas, yang pertama harus dipersiapkan adalah @font-face kit dari font yang kita gunakan. Font face kit ini terdiri dari 4 jenis file dari font dengan ekstensi eot, svg, ttf, dan woff.
Sebagai contoh, misalkan kita menggunakan font Roboto dengan ketebalan normal (400) dengan style normal (regular), maka font face kit font-nya akan memiliki Roboto-Regular-webfont.eot, Roboto-Regular-webfont.svg, Roboto-Regular-webfont.ttf, Roboto-Regular-webfont.woff. Dan pemasangan @font-face pada css style blog akan seperti di bawah ini.
@font-face {
font-family: 'Roboto';
src: url('fonts/Roboto-Regular-webfont.eot');
src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Roboto-Regular-webfont.woff') format('woff'),
url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-weight: 400;
font-style: normal;
}
Untuk font Roboto ada 18 @font-face untuk masing-masing font-weight. Jadi silahkan pilih font-weight yang akan digunakan sehingga hanya menggunakan @font-face sesuai dengan font-weight yang dipilih.
Kemudian download font face kit yang akan kita gunakan di http://www.photoshoproadmap.com/Photoshop-blog/fonts/, silahkan search font yang kita cari di kotak pencarian kemudian download web version di bagian bawah halamannya.
Biasanya dalam file downloadnya akan berisi font face kit yang komplit dari sebuah font sesuai dengan font-weight dari font tersebut.
Di sini kita contohkan untuk font Roboto, jadi yang di download adalah font face kit Roboto. Setelah kita download lalu ekstrak dan pilih font Roboto untuk font-weight normal (400) yaitu folder roboto_regular_macroman. Kemudian silahkan upload file Roboto-Regular-webfont.eot, Roboto-Regular-webfont.svg, Roboto-Regular-webfont.ttf, Roboto-Regular-webfont.woff di Google Drive sampai mendapat link file-nya. Untuk cara upload file di Google Drive bisa baca di postingan berikut:
Baca juga: Cara Upload File, HTML, CSS, Javascript Di Google Drive
Kemudian ganti masing-masing url font pada @font-face di atas atau seperti di bawah ini dengan masing-masing url host Google Drive sesuai dengan jenis file font-nya.
@font-face {
font-family: 'Roboto';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-weight: 400;
font-style: normal;
}
Ganti kode
fonts/OpenSans-Regular-webfont.eot dengan url host Google Drive untuk file font OpenSans-Regular-webfont.eot begitu selanjutnya untuk masing-masing jenis file font. Sehingga menjadi seperti di bawah ini.
@font-face {
font-family: 'Roboto';
src: url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE EOT/');
src: url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE EOT/?#iefix') format('embedded-opentype'),
url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE WOFF/') format('woff'),
url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE TTF/') format('truetype'),
url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE SVG/#RogotoRegular') format('svg');
font-weight: normal;
font-weight: 400;
font-style: normal;
}
Nah lakukan hal yang sama untuk jenis font-weight yang Anda pilih untuk blog Anda. Lalu simpan @font-face di edit HTML blog Anda bersama dengan kode CSS lainnya.
Selamat mencoba....