Solusi Render-blocking Web Font Wordpress Self Hosted

Solusi Render-blocking Web Font Wordpress Self Hosted

Bola Hero Gawai

Solusi Render-blocking Web Font Wordpress Self Hosted

Web Font Wordpress Self Hosted
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.eotOpenSans-Regular-webfont.svgOpenSans-Regular-webfont.ttfOpenSans-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.
  1. OpenSans-Regular-webfont.eot
  2. OpenSans-Regular-webfont.svg
  3. OpenSans-Regular-webfont.ttf
  4. OpenSans-Regular-webfont.woff
  5. OpenSans-Italic-webfont.eot
  6. OpenSans-Italic-webfont.svg
  7. OpenSans-Italic-webfont.ttf
  8. OpenSans-Italic-webfont.woff
  9. OpenSans-Semibold-webfont.eot
  10. OpenSans-Semibold-webfont.svg
  11. OpenSans-Semibold-webfont.ttf
  12. OpenSans-Semibold-webfont.woff
  13. OpenSans-SemiboldItalic-webfont.eot
  14. OpenSans-SemiboldItalic-webfont.svg
  15. OpenSans-SemiboldItalic-webfont.ttf
  16. 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.

Sebagai contoh, sudah saya praktekan di blog wordpress saya dengan font Open Sans 300, 300italic, 400, 400italic, dan 600. Silahkan lihat dan coba DI SINI.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×