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

问题

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?

回答1:

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'>

回答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.

回答3:

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

Choose your font at http://www.google.com/fonts

Add the desired one to your collection using "Add to collection" blue button

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'...

Click the 'Use' tab button on bottom right of the page

Click the download button on top with a down arrow image

Click on "zip file" on the the popup message that appears

Click "Close" button on the popup

Slowly scroll the page until you see the 3 tabs "Standrd|@import|Javascript"

Click "@import" tab

Select and copy the url between 'url(' and ')'

Copy it on address bar in a new tab and go there

Do "File > Save page as..." and name it "desiredfontname.css" (replace accordingly)

Decompress the fonts .zip file you downloaded (.ttf should be extracted)

Go to "http://ttf2woff.com/" and convert any .ttf extracted from zip to .woff

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

Save the file and move it at its final place and write the corresponding <link/> CSS tag to import these in your HTML page

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.

回答4:

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

Download the zip file from Google fonts and unzip it.
Upload the font files 3 at a time to http://www.fontsquirrel.com/tools/webfont-generator
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!

回答5:

3 steps:

Download your custom font on Goole Fonts and down load .css file ex: Download http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 and save as example.css
Open file you download (example.css). Now you must download all font-face file and save them on fonts directory.
Edit example.css: replace all font-face file to your .css download

Ex:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

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

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** Download all fonts contain .css file Hope it will help u

回答6:

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');

回答7:

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.

回答8:

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 :

Each package ships with all the necessary fons and css to self-host an open source typeface.
All Google Fonts have been added as well as a small but growing list of other open source fonts.

Just search npm for typeface-<typefacename> to browse the available fonts like typeface-roboto or typeface-open-sans and install like this:

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save

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:

Google Fonts Webpack Plugin
Google Fonts Offline
Google Fonts
Get Google Fonts

Further Reading:

How to host material icons offline?
Using offline Material icons and Roboto font in Electron app

回答9:

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.

回答10:

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)

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.

回答11:

just download the font and extract it in a folder. then link that font. the below code worked for me properly.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}

来源：https://stackoverflow.com/questions/15930003/downloading-a-google-font-and-setting-up-an-offline-site-that-uses-it

标签

css

fonts

offline

google-fonts