Solusi Render-Blocking Web Font Wordpress Self Hosted
Sebenarnya banyaknya link css dan script js untuk wordpress self hosted ini tidak akan mengganggu loading blog, alasannya ini sanggup diatasi dengan plugin cache. Namun kalau mengacu pada pagespeed insight, maka akan memperlihatkan nilai negative alasannya 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 kalau kita sanggup 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 bersama-sama lebih mudah. Karena kita sanggup menghosting sendiri font-font yang kita gunakan tersebut.
Nah kali ini aku akan share cara memakai web font dengan menyimpan @font-face kit pada css style blog wordpress self hosted. Dengan ini pula loading web font tidak akan mempunyai jeda, artinya dikala web dibuka maka font yang kita pilih akan eksklusif 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 memakai 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 menyerupai 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 kalau Anda memakai 4 jenis dari font Open Sans ini menyerupai 400 normal, 400 italic, 600 normal, 600 italic, maka kita akan membutuhkan 16 file font menyerupai 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 menyerupai 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 mendapat @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, kini tinggal Anda simpan stylesheet.css dari masing-masing font menyerupai 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 eksklusif dari tema yang Anda gunakan, silahkan cari pada function.php.
Silahkan unduh ebooknya kini dan Anda sanggup eksklusif menerapkan di Website WordPress dengan mudah!
Sumber https://www.kompiajaib.com/
0 Response to "Solusi Render-Blocking Web Font Wordpress Self Hosted"
Posting Komentar