Inline CSS fonts

I recently mulled this over on a project. If you have to support multiple font formats to support a variety of browsers, I think the http request latency is less of a factor than forcing all browsers to download all formats even if they won't/can't use them. I think most sites fall into that category.

I recently embedded my WOFFs on my blog as data uris, specifically to eliminate some http requests. I have three fonts. My uncompressed CSS is 100k, but gzips to 73k.<p>Then I read that IE doesn&#x27;t like data uris larger than 32k, so I recompressed my fonts with zopfli, but one was still ~35k. I did more digging and discovered that the 32k limit is for IE8; IE9&#x27;s limit is 4 gig, and everything is fine.<p>Some recent articles have seriously questioned the wisdom of doing this.<p><a href="http://theandrewbailey.com/" rel="nofollow">http:&#x2F;&#x2F;theandrewbailey.com&#x2F;</a><p><a href="http://wizard.ae.krakow.pl/~jb/ttf2woff/" rel="nofollow">http:&#x2F;&#x2F;wizard.ae.krakow.pl&#x2F;~jb&#x2F;ttf2woff&#x2F;</a><p><a href="http://caniuse.com/datauri" rel="nofollow">http:&#x2F;&#x2F;caniuse.com&#x2F;datauri</a>

Wonder how this ties in with the recent discussion over Data URI slowness on mobile [1] [2].<p>I have to admit I&#x27;ve not read all the articles in full so the question may have been answered. I see Pete did write in a comment to [1] <i>&quot;I haven&#x27;t tried data URId fonts or SVGs but those are great ideas for follow on tests&quot;</i><p>[1] <a href="http://www.mobify.com/blog/data-uris-are-slow-on-mobile/" rel="nofollow">http:&#x2F;&#x2F;www.mobify.com&#x2F;blog&#x2F;data-uris-are-slow-on-mobile&#x2F;</a><p>[2] <a href="http://www.mobify.com/blog/base64-does-not-impact-data-uri-performance/" rel="nofollow">http:&#x2F;&#x2F;www.mobify.com&#x2F;blog&#x2F;base64-does-not-impact-data-uri-p...</a>

Fortunately Compass eases all the process with inline-font-files <a href="http://compass-style.org/reference/compass/helpers/inline-data/#inline-font-files" rel="nofollow">http:&#x2F;&#x2F;compass-style.org&#x2F;reference&#x2F;compass&#x2F;helpers&#x2F;inline-da...</a> :)

The trade-off is that while you&#x27;re cutting down on a large, and generally blocking request, you&#x27;re losing cache-ability of that CSS. On the next pageview, your browser will have to download that font&#x2F;CSS again. The best way I&#x27;ve found to handle this is inline it, but use JavaScript to cache it in localStorage. That way you can get the best of both worlds.

Thanks for posting this. I actually noticed this on my site gitignore.io when I was trying to cut the load time of my site to under half a second. This is a great tip to cut down on the loading time, and I&#x27;ll definitely use this in the future.

&quot;flash of missing text or a font change flash while the fonts are loading&quot;<p>I&#x27;m on a really slow connection and I&#x27;ve seen this maybe once or twice so I&#x27;m wondering how big of a problem it really is.

Isn&#x27;t SPDY&#x27;s multiplexing supposed to be a general solution for performance issues from subresource loading?

I wonder if the licenses allow doing this.