Webfont (font awesome) Not Working Corrently Offline

Question

I've been having issues getting webfonts (font awesome to be specific) displaying properly whilst my app is offline.

so I have my font in the manifest

fonts/fontawesome-webfont.ttf?v4.1.0

When the app first loads online, the ttf file loads and gets stored in the appcache and displays correctly.

however, as soon as you disconnect the network so the app runs offline, all works fine apart from the font based icons (they display as square boxes as if the font hasn't loaded)

I've looked in chrome's appcache (chrome://appcache-internals) and the file is there

Explicit,   https://mysite.com/fonts/fontawesome-webfont.ttf?v4.1.0 141 kB

I can access the file and the header seems correct

HTTP/1.1 200 OK
Content-Type: font/ttf
Last-Modified: Fri, 23 May 2014 07:40:31 GMT
Accept-Ranges: bytes
ETag: "cbe2e465a76cf1:0"
Server: Microsoft-IIS/8.5
X-Powered-By: ASP.NET
Date: Thu, 05 Jun 2014 08:05:57 GMT
Content-Length: 141564

There are a couple of suspect things in chrome.

Application Cache Error event: Manifest fetch failed (6) https://mysite.com/appcache.manifest 

But this I assume is simply because the app is offline and cannot get an updated manifest

The second is

Resource interpreted as Font but transferred with MIME type text/html: "https://mysite.com/fonts/fontawesome-webfont.ttf?v=4.1.0"

This is the only thing that I can see that might be the cause.

Any insight would be amazing, thanks in advance!

Answer 1

To get this feature to work on my project I had to add the following to the appcache.

CACHE:
#path to fa css
public/styles/fonts/FontAwesome.otf
public/styles/fonts/fontawesome-webfont.eot
public/styles/fonts/fontawesome-webfont.svg
public/styles/fonts/fontawesome-webfont.ttf
public/styles/fonts/fontawesome-webfont.woff

NETWORK:
*

FALLBACK:
/public/styles/fonts/fontawesome-webfont.woff public/styles/fonts/fontawesome-webfont.woff
/public/styles/fonts/fontawesome-webfont.eot public/styles/fonts/fontawesome-webfont.eot
/public/styles/fonts/fontawesome-webfont.svg public/styles/fonts/fontawesome-webfont.svg
/public/styles/fonts/fontawesome-webfont.ttf public/styles/fonts/fontawesome-webfont.ttf
/public/styles/fonts/FontAwesome.otf public/styles/fonts/FontAwesome.otf

The network was still making the request for the icons even though they were cached. Adding the fallback for the icons caught the request and served the cached version.