Skip to content

Speeding up CSS with data URIs... for fonts?

Updated: at 10:40 PM

Worried about site speed and font-blocking? 79% of visitors use browsers that support the .woff format. So why not embed fonts as a data URI into your css?

IcoMoon and FontSquirrel already provide an option to Base64 encode the font into CSS.

The author of an article at SoSweet! Creative, Stephen Scaff, writes:

Now this does add considerable weight to your css, and its shear length is a bit unruly. So, I opt to create a separate fonts.css file, including base64 @font-face for all my fonts and custom icon font set. Obviously, I load this file after all other css assets. Of course, you can further minimize size by gzipping, but I’ve yet to experience any performance or Flash of Unstyled Content (FOUC) issues.

See Can I Use for the latest support matrix for the .woff format.

With Can I Use, you may even consider server-side user agent sniffing to ensure speedy downloads for older Android and IE8.

Read more from SoSweet! Creative