Downloading a Google font and setting up an offline site that uses it

Solution 1:

Check out google webfonts helper

It lets you download every web font of Google and suggests css code for the implementation. This tool also allows you to simply download all formats at once without the hassle.

Ever wanted to know where Google hosts their webfonts? This service might be handy if you want to download all .eot, .woff, .woff2, .svg, .ttf files of a font variant directly from google (normally your User-Agent would determine the best format).

Also take a look at their Github page.

Solution 2:

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

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

For an example

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

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:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

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:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Solution 3:

Found a step-by-step way to achieve this (for 1 font):
(as of Sep-9 2013)

1. Choose your font at http://www.google.com/fonts
2. Add the desired one to your collection using "Add to collection" blue button
3. Click the "See all styles" button near "Remove from collection" button and make sure that you have selected other styles you may also need such as 'bold'...
4. Click the 'Use' tab button on bottom right of the page
5. Click the download button on top with a down arrow image
6. Click on "zip file" on the the popup message that appears
7. Click "Close" button on the popup
8. Slowly scroll the page until you see the 3 tabs "Standrd|@import|Javascript"
9. Click "@import" tab
10. Select and copy the url between 'url(' and ')'
11. Copy it on address bar in a new tab and go there
12. Do "File > Save page as..." and name it "desiredfontname.css" (replace accordingly)
13. Decompress the fonts .zip file you downloaded (.ttf should be extracted)
14. Go to "http://ttf2woff.com/" and convert any .ttf extracted from zip to .woff
15. Edit desiredfontname.css and replace any url within it [between 'url(' and ')'] with the corresponding converted .woff file you got on ttf2woff.com; path you write should be according to your server doc_root
16. Save the file and move it at its final place and write the corresponding <link/> CSS tag to import these in your HTML page
17. From now, refer to this font by its font-family name in your styles

That's it. Cause I had the same problem and the solution on top did not work for me.

Solution 4:

The other answers are not wrong, but I found this to be the fastest way.

1. Download the zip file from Google fonts and unzip it.
2. Upload the font files 3 at a time to http://www.fontsquirrel.com/tools/webfont-generator
3. Download the results.

Results contain all font formats: woff, svg, ttf, eot.

AND as an added bonus they generate the css file for you too!