Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 offline cache google font api

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
like image 342
Bala Clark Avatar asked May 21 '10 14:05

Bala Clark


People also ask

Can Google Fonts be used offline?

Google Fonts are freely available for any legal use and creative people, designers, publishers can use them for their offline print projects as well. Google Fonts like Lato, Open Sans, Merriweather, Source Sans are optimized for print and look decent in printed materials as well.

How do I use offline fonts in HTML?

Step2: Choose the Font Whatever you like and download it. Step3: After completing the download unzip the file and save it in your project folder. Step4: In the CSS file write the following code: @font-face { font-family: fontfamily; // you can write the name whatever you want src: url(foldername/font-name.


2 Answers

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
like image 179
robertc Avatar answered Oct 10 '22 07:10

robertc


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.

like image 31
Dylsexia Avatar answered Oct 10 '22 07:10

Dylsexia