2013-08-28-inline-css-fonts.html.markdown.erb

---
title: Inline CSS web fonts
date: "2013-08-28 18:34 CEST"
tags: performance, webfonts, css
published: true
---

If you serve web fonts via URL, the browser makes a separate request for every web font.

This is what the timeline looks like for a URL referenced font:

<%= article_image_tag 'tl-body.png', class: 'img-fluid' %>

<h4 class="text-center">
  <span style='color: rgba(0, 0, 255, 0.67)'>Ready</span> <span style='color: rgba(255, 0, 0, 0.78)'>Load</span>
</h4>

Fonts included from stylesheets cause extra requests that only starts once the DOM has loaded.
This causes a delay and flash of missing text or a font change flash while the fonts are loading.

However, you can avoid extra requests *and* rendering issues if you inline the fonts as data-uris.

READMORE

Inline web fonts with this script:

~~~ bash
# download inliner and mark it as executable
curl https://gist.githubusercontent.com/glebm/6360088/raw > inline-fonts.rb; chmod +x inline-fonts.rb
# provide URL or path to convert
./inline-fonts.rb 'https://fonts.googleapis.com/css?family=Arimo:400'
~~~

[The script][inline-css-font.rb] outputs CSS with all the `url` values inlined in data-uris, `woff` format.
You can now deliver the fonts and CSS together in 1 request and the rendering is perfect,
no more <a href="http://en.wikipedia.org/wiki/Flash_of_unstyled_content"><def title="Flash of Unstyled Content">FOUC</def></a> or font change.

### There be dragons

* base64 encoding causes a +33% file size increase, but gzip mitigates this
* when there are more fonts files at some point it is faster to download them in parallel, depending on the font sizes and latency / bandwidth of the audience.
* public CDN files may already be in browser cache (e.g. the most popular Google Web Fonts)
* the most common format woff is [supported][caniuse-woff] everywhere but IE 8, stock Anroid Browser,
  and Chrome on Windows, which has a [general rendering issue][chrome-font-issue] with some fonts, and base64 [is slow on Android 2 and iOS 5][mobify-data-uris-article].
  You will have to serve other formats to these browsers

Most individual font sizes are in 10 - 20 KB range; if you only use a few font files this could easily cut down initial load times by 5-20%.
Measure with any client-side monitoring tool to find out (it is best if your tool shows the distribution, and not just the average).

This is what the timeline looks like once the fonts are inlined:

<%= article_image_tag 'tl-inline.png', class: 'img-fluid' %>

When inlined, all the fonts are finished downloading before DOMContentReady fires.

Alternatively, you could try using [Google Page Speed Module][mod-pagespeed], which may intellegently apply this and other optimizations, but has it's own drawbacks.
[SPDY](http://en.wikipedia.org/wiki/SPDY) should already be on for both timelines.

#### See also

* [Discussion on Hacker News](https://news.ycombinator.com/item?id=6304999)


[inline-css-font.rb]: https://gist.github.com/glebm/6360088
[caniuse-woff]: http://caniuse.com/woff
[mod-pagespeed]: https://developers.google.com/speed/pagespeed/module
[mobify-data-uris-article]: http://www.mobify.com/blog/data-uris-are-slow-on-mobile/
[chrome-font-issue]: https://code.google.com/p/chromium/issues/detail?id=137692