Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Thanks!

like image 642
The John Smith Avatar asked Aug 12 '11 15:08

The John Smith


People also ask

Which of the following is not a valid section of app cache manifest?

Which is not the section of manifest? Explanation: If the files are not in cache they come from a list of the files in the network. Cache is the default section.

What is manifest cache?

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access.

What does Section cache do in a manifest file?

The CACHE section contains files you want to load and store on the user's machine. The first time the user loads your app, the browser will store all the files in the CACHE section of your app cache manifest. The NETWORK section contains all the resources that require a network connection to be loaded.


1 Answers

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.

like image 65
robertc Avatar answered Oct 25 '22 15:10

robertc