Fast Font Loading Techniques (2015)

Due to site isolation, nowadays CDNs aren't as advantageous as they used to be. So it's now a normal thing to just load the font like any local JS/CSS asset, and set caching headers on it so the browser can do the 'fast' bit for you, on subsequent loads.

The latest trick is to use the system font stack:

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;

Missing an item in that list: Use a font that is present in the computer by default :P

Most websites don't need a custom font.

it's ironic (but expected) that this blog post talking about "fast font loading techniques" is riddled with problems: flash of unstyled text, flash of invisible text, square boxes until glyphs are loaded, difference in web font size causing the entire page to shift upwards to compensate for new height: https://i.imgur.com/Gxo5CUk.gif

shameless plug if you like these kinds of problems and want to incorporate them onto your own webage: http://hiccupfx.telnet.asia