HTML5 offline cache google font api

Question

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

Answer 1

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.

Answer 2

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