Downloading a Google font and setting up an offlin

Question

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?

Answer 1

When using Google Fonts, your workflow is divided in 3 steps : "Select", "Customize", "Embed". If you look closely, at the right end of the "Use" page, there is a little arrow which allows you to download the font currently in your collection.

After that, and once the font is installed on your system, you just have to use it like any other regular font using the font-family CSS directive.

Answer 2

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.

Answer 3

Take a look at this handy article to explain how to use Google fonts offline

Essentially you are including the font into your project.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Answer 4

I followed duydb's answer to produce the python code below that automates this process.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Hope this helps with some of the copy-paste death.

Answer 5

You need to download the font and reference it locally.

Download the CSS from the link you posted, then download all of the WOFF files and (if needed) convert them to TTF.

Then change the CSS from the link you posted to include the fonts locally.

From

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

To

url(/path/to/font/font.woff)

Voila! There might be some more you need to do but the above is the basics. This article explains a little better.

Answer 6

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.