Using subfont, for each page, extract a subset of font code points used at that page – and load only them instead of the full font. This relies on a) the unicode-range CSS property, b) the fact that browsers don’t download @font-face rules that don’t have any matching characters in the document.
This brings huge benefits: e.g., in the home page, Montserrat Black is used only in a single phrase ↓, so there’s totally no need to load the full font file for it.
This implementation is somewhat similar to Zach Leatherman’s Critical FOFT, but without a faux bold/italic.
Potential TODO for the future: deal with emojis that trigger downloading of the full font:
⚠ WARN: Missing glyph fallback detected.
When your primary webfont doesn't contain the glyphs you use, your browser will load your fallback fonts, which will be a potential waste of bandwidth.
These glyphs are used on your site, but they don't exist in the font you applied to them:
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at talks/web-perf-101/index.html:1067:1724
- \u{2192} (→) in font-family 'Merriweather' (400/normal) at talks/web-perf-101/index.html:487:647
- \u{2011} (‑) in font-family 'Merriweather' (400/italic) at talks/web-perf-101/index.html:861:515
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at talks/quick-apps/index.html:116:16424
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at content/index.html:153:4527
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at gold/psd2html-questions-28f45702/index.html:285:367
- \u{26a1} (⚡) in font-family 'Merriweather' (400/italic) at gold/psd2html-questions-28f45702/index.html:268:105
- \u{d83d} (📡) in font-family 'Merriweather' (400/italic) at gold/psd2html-questions-28f45702/index.html:268:179
- \u{d83d} (📢) in font-family 'Merriweather' (400/italic) at gold/psd2html-questions-28f45702/index.html:268:74
- \u{d83d} (🛁) in font-family 'Merriweather' (400/italic) at gold/psd2html-questions-28f45702/index.html:268:298
- \u{d83e} (🤚) in font-family 'Merriweather' (400/italic) at gold/psd2html-questions-28f45702/index.html:268:233
- \u{fe0f} (️) in font-family 'Merriweather' (400/italic) at gold/psd2html-questions-28f45702/index.html:268:106
- \u{2192} (→) in font-family 'Merriweather' (400/normal) at gold/psd2html-questions-28f45702/index.html:272:1 - \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at gold/book24-audit-c7529e55/index.html:720:575
- \u{2192} (→) in font-family 'Merriweather' (400/normal) at gold/book24-audit-c7529e55/index.html:195:136
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at blog/link-rels/index.html:365:787
- \u{2192} (→) in font-family 'Merriweather' (400/normal) at blog/link-rels/index.html:294:72
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at blog/polyfills/index.html:313:787
- \u{2192} (→) in font-family 'Merriweather' (400/normal) at blog/polyfills/index.html:249:139
- \u{301} (́) in font-family 'Merriweather' (400/italic) at blog/polyfills/index.html:301:68
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at blog/perf-for-startups/index.html:221:787
- \u{20e3} (⃣) in font-family 'Montserrat' (700/normal) at blog/perf-for-startups/index.html:167:11
- \u{fe0f} (️) in font-family 'Montserrat' (700/normal) at blog/perf-for-startups/index.html:167:10
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at subscribe/index.html:127:16274
- \u{d83d} (🖤) in font-family 'Montserrat' (400/normal) at index.html:309:1501
- \u{d83d} (💸) in font-family 'Montserrat' (700/normal) at index.html:293:1169
Using
subfont
, for each page, extract a subset of font code points used at that page – and load only them instead of the full font. This relies on a) theunicode-range
CSS property, b) the fact that browsers don’t download@font-face
rules that don’t have any matching characters in the document.This brings huge benefits: e.g., in the home page, Montserrat Black is used only in a single phrase ↓, so there’s totally no need to load the full font file for it.
This implementation is somewhat similar to Zach Leatherman’s Critical FOFT, but without a faux bold/italic.
Potential TODO for the future: deal with emojis that trigger downloading of the full font: