What I've got is a font-family CSS declaration to use a stylised web font first, and fall back to system fonts. This works fine, but my web font is huge ~15MB (Chinese font) and even hosting this on CDN it takes over 5s to load.

The problem with this is that browsers handle the display differently. I think Firefox has the preferred way, which is to use whichever font is available first (system font) and progressively display in the web font when it is ready (loaded).

However, Chrome just tries to use the web font first (as this is listed first in the font-family) and just displays a blank space until the font is ready to render the text.

Is there a way to make Chrome behave the same as Firefox?

EDIT: Add font-family declaration.

font-family: "Noto Sans CJK TC", "Microsoft Yahei", "微软雅黑",
             SimHei, "黑体", STHeiti, "华文黑体", sans-serif;

What I've got is a font-family CSS declaration to use a stylised web font first, and fall back to system fonts. This works fine, but my web font is huge ~15MB (Chinese font) and even hosting this on CDN it takes over 5s to load.

The problem with this is that browsers handle the display differently. I think Firefox has the preferred way, which is to use whichever font is available first (system font) and progressively display in the web font when it is ready (loaded).

However, Chrome just tries to use the web font first (as this is listed first in the font-family) and just displays a blank space until the font is ready to render the text.

Is there a way to make Chrome behave the same as Firefox?

EDIT: Add font-family declaration.

font-family: "Noto Sans CJK TC", "Microsoft Yahei", "微软雅黑",
             SimHei, "黑体", STHeiti, "华文黑体", sans-serif;

• javascript
• html
• google-chrome
• fonts
• webfonts

• Have you got an alternative font rule? AKA font-family: 'Chinese font', sans-serif – Marcos Pérez Gude Commented Mar 23, 2016 at 12:21
• 1 You can load css file having font asynchronously.. – Rayon Commented Mar 23, 2016 at 12:25
• 2 filamentgroup./lab/font-loading.html This article is useful for you. This is a too broad topic to stackoverflow I guess, but if someone can explain you without copy&paste from this link will be better. Good luck – Marcos Pérez Gude Commented Mar 23, 2016 at 12:29
• dev.opera./articles/better-font-face this is useful too – Marcos Pérez Gude Commented Mar 23, 2016 at 12:32
• Thanks for the suggestions, I now have some reading to do ^^ – Trung Nguyen Commented Mar 23, 2016 at 12:35

2 Answers 2

After reading all the ments, I now have an acceptable solution to progressively loading web fonts.

1. If possible, use a subset of the font (has all the character/glyphs you intend to use on the page). I had no success trying to create my own subset as the file was huge to start with (font squirrel has a file size limit), but luckily, there was a font I could use from Google's early access fonts (Noto Sans TC). File size went from 15MB to 2MB.
2. Use gzip pression when uploading to your host (woff2/woff/eot files are already pressed or did not show much filesize reduction). I managed to save 300K doing this.
3. Set your font-family CSS definitions initially to use web safe fonts.
4. Define your @font-face definitions as normal and use a font loader with event handling to progressively render fonts (https://github./bramstein/fontfaceobserver).
5. Fontfaceobserver adds a classname to the HTML element so use this for element selections and overwrite existing font-family definitions with loaded fonts (add new font family to the front of existing font families).

There is a slight "pop" when newly loaded font's replace the web safe ones, but at least there is no FOIT (flash of invisible text).

https://www.filamentgroup./lab/font-events.html has a good guide on using FontFaceObserver, but couldn't get it to work with their example code. Instead, I used the reference code from the GitHub repo - although I think their wording is wrong/misleading. You should use fontfaceobserver.standalone.js if you don't have a Promise polyfill already implemented.

the simple way to achieve this to add

@font-face {
    font-display: swap;
}

for more information https://developer.mozilla/en-US/docs/Web/CSS/@font-face/font-display