Ditulis oleh: Ditulis pada: 3/03/2015
Sebenarnya banyaknya link css dan script js untuk wordpress self hosted ini tidak akan mengganggu loading blog, karena ini bisa diatasi dengan plugin cache. Namun jika mengacu pada pagespeed insight, maka akan memberikan nilai negative karena akan ada banyak render-blocking dari link css maupun script js.
Link css dan script js ini berasal dari css style dari template blog, web font, maupun dari plugin-plugin yang dipasang. Tentunya jika kita bisa meminimalkan render-blocking ini maka itu akan menjadi lebih baik, salah satunya yaitu menghilangkan render-blocking dari link css web font.
Pada blog wordpress self hosted, menghilangkan render-blockinig web font ini sebenarnya lebih mudah. Karena kita bisa menghosting sendiri font-font yang kita gunakan tersebut.
Nah kali ini saya akan share cara menggunakan web font dengan menyimpan @font-face kit pada css style blog wordpress self hosted. Dengan ini pula loading web font tidak akan memiliki jeda, artinya ketika web dibuka maka font yang kita pilih akan langsung tampil.
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 Open Sans dengan ketebalan normal (400) dengan style normal, maka font face kit font-nya akan memiliki OpenSans-Regular-webfont.eot, OpenSans-Regular-webfont.svg, OpenSans-Regular-webfont.ttf, OpenSans-Regular-webfont.woff. Dan pemasangan @font-face pada css style blog akan seperti di bawah ini.
@font-face {
font-family: 'Open Sans';
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#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Maka jika Anda menggunakan 4 jenis dari font Open Sans ini seperti 400 normal, 400 italic, 600 normal, 600 italic, maka kita akan membutuhkan 16 file font seperti di bawah ini.
- OpenSans-Regular-webfont.eot
- OpenSans-Regular-webfont.svg
- OpenSans-Regular-webfont.ttf
- OpenSans-Regular-webfont.woff
- OpenSans-Italic-webfont.eot
- OpenSans-Italic-webfont.svg
- OpenSans-Italic-webfont.ttf
- OpenSans-Italic-webfont.woff
- OpenSans-Semibold-webfont.eot
- OpenSans-Semibold-webfont.svg
- OpenSans-Semibold-webfont.ttf
- OpenSans-Semibold-webfont.woff
- OpenSans-SemiboldItalic-webfont.eot
- OpenSans-SemiboldItalic-webfont.svg
- OpenSans-SemiboldItalic-webfont.ttf
- OpenSans-SemiboldItalic-webfont.woff
Dan @font-face yang harus dipasang di style css blog seperti di bawah ini.
@font-face {
font-family: 'Open Sans';
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#OpenSansRegular') format('svg');
font-weight: normal;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Italic-webfont.eot');
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Semibold-webfont.eot');
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
font-weight: 600;
font-style: italic;
}
Untuk mendapatkan @font-face kit dari font silahkan cari dan download DI SINI. Silahkan ketikan jenis font yang dicari di kotak search. Setelah ada, silahkan masuk ke postingannya dan scroll halaman dan klik download web version untuk mendownlod font-face kit dari font yang kita cari.
Setelah itu silahkan ektrak file hasil downloadnya, di situ biasanya ada folder web font dan sub folder dari jenis yang di dalamnya terdapat font face kita dan stylesheet.css dari font tersebut. Setelah itu silahkan menuju cpanel hosting Anda dan klik file manager. Klik public_html > wp-content > themes > kemudian klik tema yang Anda gunakan. Jika belum ada folder font, silahkan buat folder font terlebih dahulu.
Setelah itu silahkan upload font face kit dari font yang Anda perlukan ke dalam folder font yang tadi Anda buat. Setelah proses upload font selesai, sekarang tinggal Anda simpan stylesheet.css dari masing-masing font seperti di atas ke dalam style css (style.php) blog Anda.
Kemudian silahkan hapus link css style untuk web font yang sebelumnya Anda pasang. Jika link tersebut langsung dari tema yang Anda gunakan, silahkan cari pada function.php.
Silahkan unduh ebooknya sekarang dan Anda dapat langsung menerapkan di Website WordPress dengan mudah!