I have a template and it has a reference to a Google font like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
How can I download it and set it up to use in my pages which are running offline all the time?
The other answers are not wrong, but I found this to be the fastest way.
Results contain all font formats: woff, svg, ttf, eot.
AND as an added bonus they generate the css file for you too!
3 steps:
Ex:
Look at src: -> url. Download http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 and save to fonts directory. After that change url to all your downloaded file. Now it will be look like
** Download all fonts contain .css file Hope it will help u
Just go to Google Fonts - http://www.google.com/fonts/ , add the font you like to your collection, and press the download button. And then just use the @fontface to connect this font to your web page. Btw, if you open the link you are using, you'll see an example of using @fontface
For an example
Just change the url address to the local link on the font file, you've downloaded.
You can do it even easier.
Just download the file, you've linked:
Name it opensans.css or so.
Then just change the links in url() to your path to font files.
And then replace your example string with:
If you'd like to explicitly declare your package dependencies or automate the download, you can add a node package to pull in google fonts and serve locally.
npm - Google Font Downloads
The typefaces project creates NPM packages for Open Source typefaces :
Just search npm for
typeface-<typefacename>
to browse the available fonts like typeface-roboto or typeface-open-sans and install like this:npm - Google Fonts Download-ers
For the more generic use case, there are several npm packages that will deliver fonts in two steps, first by obtaining the package, and then by pointing it to the font name and options you'd like to include.
Here are some of the options:
Further Reading:
just download the font and extract it in a folder. then link that font. the below code worked for me properly.