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 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.

Font Style Matcher →

The New Google Fonts

The new Google Fonts makes it easier than ever to browse our collection of open source designer fonts and learn more about the people who make them. Using the Material Design framework, we created a design that scales across different screen sizes and devices, and updated the entire look and feel of the site, from the overall interactivity all the way down to the logo design.

Google Fonts →

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 and gzipped), so it can be easily included in every page.
  • It can preload a font before it’s used.
  • It can solve the “invisible text” issue (WebKit-based browsers on slow network) by applying a class during font loading.
  • It can also solve the Flash Of Unformatted Text, aka FOUT (still happens in Internet Explorer).
  • Supports practically all browsers. Tested under the latest browser on Android, iOS, OS X, Windows, as well as under IE6+, Firefox 3.6+.

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

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 apps to provide a set of colorful emoji.

A more extensive post – in addition to the previously posted Color Emoji in Windows 8.1 —The Future of Color Fonts? – going more in depth on the matter.

Colorful typography on the web: get ready for multicolor fonts →

Color Emoji in Windows 8.1 —The Future of Color Fonts?


With Windows 8.1, Microsoft’s operating system now also supports color emoji. But they did it in a very different way than Apple and Google. Instead of using PNG images, they introduced a support for layered vector glyphs!

Reminds of that neat trick where one would layer webfonts/icofonts on top of eachother, all in a different color (e.g. Forecast Font).

Best thing above all about the technology: it’s backwards compatible.

Color Emoji in Windows 8.1 —The Future of Color Fonts? →