Cara mempercepat loading webfonts

Cara mempercepat loading fonts blog (webfonts).

Sekian banyak kode yang saya implementasikan namun belum ada yang mempercepat loading font. Nah berikut tutorialnya:

Metode 1.

Taruh atau ambil fonts (ttf,woff, dan lainnya) di cdn
 Lalu pasang htaccess berikut:
# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
 Header set Access-Control-Allow-Origin "*"
</FilesMatch>
# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
 add_header Access-Control-Allow-Origin *;
}

2. Gunakan Non-Blocking CSS Loading

<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';">
<link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media='all';">

3. Bedakan fonts model dengan CSS


h1 { font-family: Arial, serif; } /* basic system font */ .fontsloaded h1 { font-family: 'MySpecialFont', serif; } /* custom system font */

<link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >

4. Letakkan fonts file di penyimpanan lokal (localstorage)

Selesai. Begitulah sedikit pengetahuan saya dalam merender fonts lebih cepat.
Namun saya rekomendasikan menggunakan NON BLOCKING RENDER LOADING.

Comments

Popular posts from this blog

Install deb package via Termux

How to Make Blogger Safelink Converter v3

List of weapon buff materials, effects and how it can be durango wild lands