// 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 →