Downloading a Google Font and Setting Up an Offline Site That Uses It

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

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

How to use Google fonts without internet connection

thanks for help
but i got it by help of this site https://transfonter.org/
then put all genereated woff files in same folder of css file then append font face to my css file
then use font normally as described by transfonter.org

How to use dowloaded Google Fonts in my app offline?

Be careful, the CSS generated by Google Fonts depends on the requesting user agent as every browser uses different font formats, that are TTF, EOT, WOFF, WOFF2 and SVG. There is no way to directly download all font variants directly from Google, other than faking the user agent and inspecting the generated CSS rules.

You can use a tool like http://www.localfont.com/ to download all font formats and automatically generate cross browser CSS rules.

How to host google web fonts on my own server?

Please keep in mind that my answer has aged a lot.

There are other more technically sophisticated answers below, e.g.:

• neverpanic/google-font-download
• google-webfont-helper
• localfont

so don't let the fact that this is the currently accepted answer give you the impression that this is still the best one.

---

You can also now also download google's entire font set via on github at their google/font repository. They also provide a ~420MB zip snapshot of their fonts.

---

You first download your font selection as a zipped package, providing you with a bunch of true type fonts. Copy them somewhere public, somewhere you can link to from your css.

On the google webfont download page, you'll find a include link like so:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

It links to a CSS defining the fonts via a bunch of @font-face defintions.

Open it in a browser to copy and paste them into your own CSS and modify the urls to include the right font file and format types.

So this:

    @font-face {
      font-family: 'Cantarell';
      font-style: normal;
      font-weight: 700;
      src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
    }

becomes this:

    /* Your local CSS File */
    @font-face {
        font-family: 'Cantarell';
        font-style: normal;
        font-weight: 700;
        src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
    }

As you can see, a downside of hosting the fonts on your own system this way is, that you restrict yourself to the true type format, whilst the google webfont service determines by the accessing device which formats will be transmitted.

Furthermore, I had to add a .htaccess file to my the directory holding the fonts containing mime types to avoid errors from popping up in Chrome Dev Tools.

For this solution, only true type is needed, but defining more does not hurt when you want to include different fonts as well, like font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Using downloaded font offline

Add this at the top of your CSS document.

@font-face {
    font-family: Calli;
    src: url('../fonts/Calligraffitti/Calligraffitti-Regular.ttf');
}

You can then use it like this:

.page-header {
    font-family: Calli;
}

---

Related Topics