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.