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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.