font-display is a CSS feature that allows us to control how we load fonts.Google Fonts are used by many websites (including Scotch.io) and up until now, we didn't have the ability to control how we loaded the fonts.
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths . This tool helps you do exactly that.
A lot has been written about variable fonts ever since they were introduced with the new OpenType 1.8 specification late last year. But from a practical point of view, for web designers and developers, what can we expect?