Is it possible to load webfonts through the offline storage cache manifest?

Question

I understand that I can import my fonts through html/css but I am wondering if this is a achievable approach.

Thanks!

Answer 1

Yes, if you add fonts to your manifest file they will be downloaded along with the rest of the files, and then be available offline. The fonts will need to be available from the same server where your offline app is, because you can't cache resources not on your domain. You couldn't cache a Google Web Font, for instance. I've been doing some testing on this, it seems fonts from Google are cached fine on Chrome and Opera, only Firefox has problems. The 'not on your domain' restriction for the manifest only applies when it's served over HTTPS.

You will still need to reference the fonts with a @font-face rule in your CSS for them to be used in your page. For example, in your manifest file:

CACHE MANIFEST
# v1
index.html
style.css
GenBasR-webfont.eot
GenBasR-webfont.woff
GenBasR-webfont.ttf
GenBasR-webfont.svg

In style.css:

@font-face {
    font-family: 'GentiumBasicRegular';
    src: url('GenBasR-webfont.eot');
    src: url('GenBasR-webfont.eot?iefix') format('eot'),
         url('GenBasR-webfont.woff') format('woff'),
         url('GenBasR-webfont.ttf') format('truetype'),
         url('GenBasR-webfont.svg#webfontLblSsz1O') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'GentiumBasicRegular';
}

Get the Gentium files from Font Squirrel.