Webfont (awesome font) Corrently Offline not working

Question

I'm having trouble getting webfonts (a font other than a specific one) that displays correctly while my application is disconnected.

so I have my own font in the manifest

fonts/fontawesome-webfont.ttf?v4.1.0 

When the application is downloaded for the first time, the ttf file is downloaded and saved in appcache and displayed correctly.

however, as soon as you disconnect the network so that the application works offline, everything works differently from the font-based icons (they appear as square boxes, as if the font did not load)

I looked in chrome 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 title seems to be 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 several suspicious things in chrome.

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

But I assume that this is simply because the application is disabled and cannot receive the updated manifest

Second

 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 I see that could be the reason.

Any insight would be awesome, thanks in advance!

Answer 1

In order for this function to work on my project, I had to add the following to 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 still requested icons, even if they were cached. Adding a backup for the icons captured the request and served the cached version.

Answer 2

As a way around this for a standalone cache, you can add a custom style immediately after loading the font with the awesome css library removed.

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style> /*Temporary Fix for Font Awesome ApplicatonManifest offline Cache */ @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot'); src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2') format('woff2'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } </style> 

Answer 3

I tried this, but had the correct appcache configuration shown in oconn's answer. I managed to get this working by deleting the version after the file name in the css file:

 @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); ... 

in five or so places where it is added to the url, changing it to this -

 @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot'); ... 

This is now in the “Troubleshooting” section of the awesome faq font for Phonegap projects (although I don't use Phonegap, though), and the issue is cited in github issue 3632 for fontawesome.