This article demonstrates a technique to get content in front of visitors as quickly as possible by asynchronously downloading stylesheets to prevent them from blocking page render.
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?
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 [1]. This tool helps you do exactly that.
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.
This article contains contributions from Monica Dinculescu, Rob Dodson, and Jeff Posnick.Typography is fundamental to good design, branding, readability, and accessibility. Webfonts enable all of the above and more: the text is selectable, searchable, zoomable, and high-DPI friendly, providing consistent and sharp text rendering regardless of the screen size and resolution. Webfonts are critical to good design, UX, and performance.
Bob Taylor, Monotype’s Font Technologies Director, offers his views on the promise of Variable Fonts and shares how Monotype and the tech industry are bringing this promise to reality. He shares a few Variable Font tests gone wrong, what we are learning, and introduces the newest Variable Font from Monotype.
Loading CSS without blocking render by Keith Clark
What do Variable Fonts mean for Web Developers? – prototypr
Interface font family
Font style matcher
Troy Hunt: The Trouble with Politicians Sharing Passwords
Google Fonts Now Supports font-display! ― Scotch.io
Web Font Optimization | Web Fundamentals | Google Developers
Variable Fonts: making the promise a reality | Monotype
The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)