Most efficient webfont configuration with html5 appcache

Question

I have a single page static site where I have configured the appcache to cache all resources needed to load the page for future use, in order to minimize server requests and make the page available offline.

I have run into a problem with font support. I use web fonts with @font-face and woff, ttf, svg, and eot formats to ensure compatibility with all browsers. The issue is that I have to include multiple fonts in the cache manifest in order to ensure cross-browser compatability. While normally a browser would just read the @font-face ,select the appropriate font format, and download only that format (or none at all if it's available locally), I could not find a way to accomplish that with appcache while ensuring that everything is available cached and offline. My solution was just to include all of the font formats in the cache manifest. While this worked, it was extremely wasteful, because clients downloaded fonts they didn't need.

Eventually I did some research on browser support, comparing appcache, ttf, woff, eot, and svg fonts. I came to the conclusion that all browsers that support appcache work with either woff or ttf, and that svg and eot have very little support. (The limiting factors are that android has no woff support and IE has no ttf support). Using this, fonts still displayed correctly everywhere. However, it's still really inefficient, as two fonts are downloaded regardless of need.

So, in summary, what is the recommended way to deal with fonts and appcache most efficiently?

Answer 1

As I have since discovered in another question, IE 9+ DOES support TTF fonts, as long as they are formatted correctly. This means that all major browsers that support the HTML5 Application Cache can also work with ttf fonts, so I only need to include that one format in the cache. I have tweaked the bulletproof @font-face syntax to prefer TTF over WOFF (since that's what will be in the cache) and added wildcards to my cache manifest to deal with any edge cases.

Here's my modified @font-face format:

@font-face {font-family: '<font-family>';src: url('<font-file>.eot?#iefix') format('embedded-opentype');src: local('<font-family>'),url('<font-file>.ttf')  format('truetype'),url('<font-file>.woff') format('woff'),url('<font-file>') format('svg');}

Here's the cache manifest format:

CACHE MANIFEST
<other stuff>
...
/<font-file>.ttf

NETWORK:
*.ttf
*.woff
*.svg
*.eot

Note: as brought up in the comments below, using wildcards in the NETWORK section of a cache manifest might not be valid markup. Using the absolute URL is a better way to go.

And here's a webpagetest result of IE10 using and caching the TTF font. I have verified that the @font-face still seems "bulletproof" across browsers.

There are two minor issues with this setup:

• Clients that already have the font available locally will still download it (this isn't a major issue for me, as only about 5% of visitors have it)
• Edge cases: browsers that will read the manifest but won't work with ttf for whatever reason will still work online, but not offline. I could not find a browser that exhibits this behavior, but anything is possible. Again, only a very small percentage of clients will experience it.

Answer 2

I don't believe you need to explicitly list the font in your appcache manifest. So long as the font is used on the page it should get automatically included in the browser's application cache.