Optimize font loading

[iamakulov]

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