7

I'm trying to create an offline HTML5 test application, and am playing with the new google fonts api at the same time. Does anyone have any ideas how to cache the remote fonts? Simply putting the api call in the cache manifest doesn't work, I assume this is because the api actually loads other files (ttf, eot, etc).

Any ideas if using the font api offline would be possible?

For reference this is the call I am making:

http://fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie
Bala Clark
  • 1,524
  • 12
  • 19

2 Answers2

6

Robertc's approach is the solution...

I.e., Paste the google-provided link into your browser, and then add any files that are referenced into your manifest.

In my case I referenced

<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>

which just consists of the following style definition 

@font-face {
    font-family: 'Patua One';
    font-style: normal;
    font-weight: 400;
    src: local('Patua One'), local('PatuaOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

So to get the font to work when cached (off-line or not), you have to add the URL referenced in the 'src' to your manifest.

Dylsexia
  • 61
  • 1
  • 1
6

If you paste that URL into the browser address bar you'll see the files the CSS links to:

http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q
http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0
http://themes.googleusercontent.com/font?kit=xwIisCqGFi8pff-oa9uSVOj-KzHqS7w8OFmqoAXdQwE
robertc
  • 74,533
  • 18
  • 193
  • 177
  • 3
    But you have to be careful. Google give you different font files depending on OS you are requesting it from. So, you should add all the font files for all the OSs – Aleksandr Motsjonov Apr 16 '13 at 09:23
  • 1
    Indeed. A way to cache all file extensions is described in this stackoverflow question: http://stackoverflow.com/questions/7042834/is-it-possible-to-load-webfonts-through-the-offline-storage-cache-manifest – Laurens Rietveld Sep 06 '13 at 08:50