Fontastic Web Performance

Emojineer Monica Dinculescu: Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost β€” if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk […]

What do Variable Fonts mean for Web Developers?

Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time. Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see […]

Minimize FOUT with Font Style Matcher

Great tool by Monica Dinculescu (@notwaldorf): 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 […]

Zenfonts – A tiny and flexible JavaScript tool to help loading web fonts

// JavaScript Zenfonts(“Dolly”, {fallbackClass: “fallback-dolly”}) /* CSS */ body { font-family: “Dolly”, Georgia, serif; } .fallback-dolly body { font-family: Georgia, serif; } A tiny JavaScript helper to load and pre-load web fonts that are specified via @font-face. It uses best practices from other solutions, but it’s still a unique combination: It’s tiny (793 bytes minimized […]

Multicolor Fonts in the browser

Seemingly out of nowhere, big guys like Apple, Google, Microsoft, Mozilla and Adobe are proposing multicolor font formats, and rushing to have them implemented in browsers and OSes. This sudden interest is not so much fueled by typographers, designers or web developers, but by an unlikely group: teenagers. More specifically: teenagers who demand their communication […]