Cara mempercepat loading webfonts Cara mempercepat loading fonts blog webfonts. Metode 1. Apache config Header set Access-Control-All
, ,

Cara mempercepat loading fonts blog (webfonts).

Cara mempercepat loading 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.