Geek Answers Handbook

HTML5 standalone cache google api font

I am trying to create a standalone HTML5 test application while playing with new google fonts. Does anyone have any idea how to cache remote fonts? Simply placing the api call into the cache manifest does not work, I assume that this is because the api actually loads other files (ttf, eot, etc.).

Are any ideas possible when using the api font offline?

For reference, this is the call I make:

http://fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie
+6
html5 caching font-face offline
source share
2 answers

If you paste this URL into the address bar of your browser, you will see CSS link files:

 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
+6
source share

Robert's approach is a solution ...

Ie, Paste the link provided by Google into your browser and then add all the files referenced by your manifest.

In my case, I referred to

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

which consists only 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 make the font work when caching (off-line or not), you need to add the URL specified in "src" to your manifest.

+6
source share

More articles:


All Articles