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.

Answer 2

As a way to bypass this for Offline Cache you can add a custom style directly after loading the font awesome css library with them 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 experienced this but had the correct appcache config shown in oconn's answer - I was only able to get this working by removing the version after the filename in the css file:

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

in the five or so places where it is appended 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 font-awesome faq for Phonegap projects (I am not using Phonegap, though) - and the issue is cited in github issue 3632 for fontawesome.