HTML5 offline appcache custom fonts not loading or displaying properly when server is down

Question

These fonts load perfectly fine when the server is running OR when the client is offline. But as soon as I shut down my server (let's assume it can't be contacted because it's down) the fonts break and this is what I get in console:

Application Cache Error event: Manifest fetch failed (-1) [URL]

and

Resource interpreted as Font but transferred with MIME type text/html: [URL]

I'm running a localhost and I can only assume that this will be the behavior in the wild since even when I'm offline it still checks the Manifest like so in the console:

Document was loaded from Application Cache with manifest [URL]

Application Cache Checking event

Application Cache NoUpdate event

Can anyone shed some light on this?

Answer 1

The manifest fetched failed error always happens when you go offline. The second error means that the fonts were not received as the correct MIME type, so you will need to add a .htaccess or something that will set the mime types correctly. Also make sure that the file extension for the fonts is correct.