How To Use Google Font Locally

Abhishek Ghosh

By Abhishek Ghosh August 25, 2014 11:54 am Updated on August 25, 2014

How To Use Google Font Locally

If Google can supply your data to NSA, you definitely can do reverse engineering! Here is How To Use Google Font Locally Maintaining the Law. Google officially answers the question “Can I download the fonts on Google Fonts to my own computer?” as yes. In other words, if the Font itself is of Open Source (i.e. the moron developer like me has added GNU GPL 3.0 License before adding to their library) or if you have Paid for the font for the purpose (they are not available via Google Font Library but other services). The question answer can be found here :

https://developers.google.com/fonts/faq

1	https://developers.google.com/fonts/faq

We do neither download and use Google’s any font or use their scripts.

How To Use Google Font Locally – Understand the Basics

There are lot of reasons why you will want to use an open source font delivered from your own server. When you are seeking with the key phrase How To Use Google Font Locally, that simply means that you have yet not understood a basic thing – most of these fonts come with fully open source license, because they are not developed by Google. The developers usually make the fonts available elsewhere. You must read these articles – Fonts : Resources and Types of According to License; Serving Fonts from Rackspace Cloud Files CDN; How To Use Any Web Font From Own Hosted Library and Base64 Encoding for Font CSS.

In other words, before doing the tougher way – trying to download the Google Font on your computer; you should search the web with the name. There is enough chance that the Font is available under GNU GPL 3.0 or compatible License. It will save your huge time.

---

How To Use Google Font Locally – Methods

Take that, I suddenly liked Lato Thin 100. The reason to like is nothing but it looks like premium font Proxima Nova, these slick fonts looks great on Retina Display screens. Instead of using Google Fonts or doing tougher reverse engineering, you can fully legally download the fonts from the developer’s website :

http://www.latofonts.com

1	http://www.latofonts.com

Currently, the Lato fonts on Google Fonts are still the older 1.0 version. If you™d like to use the new 2.007 version on your website, you need to install a œself-‹‹hosted webfont kit on your server. We do not provide support or instructions how to install these fonts on your website! You need to figure it out on your own!

The developers uses Google Font to get back link and popularity. How you will use is written in the linked guides. We love Base64 encoded fonts. You can use skip that complexity. Still in short :

 # an arbitrary example
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
 # It links to a CSS defining the fonts via @font-face, translating it to local CSS
/* This is Your CSS File */
@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');
}
/* Your CSS File Ends */
 # Let us download the font. create a directory (we are assuming its a wordpress theme) inside current 
 # theme's directory and name it as fonts
/* This is Your 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('woff');
}
/* Your CSS File Ends */

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

# an arbitrary example

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

# It links to a CSS defining the fonts via @font-face, translating it to local CSS

/* This is Your CSS File */

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

}

/* Your CSS File Ends */

# Let us download the font. create a directory (we are assuming its a wordpress theme) inside current

# theme's directory and name it as fonts

/* This is Your 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('woff');

}

/* Your CSS File Ends */

If you want to use a bash script to download Google Font, here is readymade way :

https://gist.github.com/AbhishekGhosh/f1005e4f915eb5e4137c

1	https://gist.github.com/AbhishekGhosh/f1005e4f915eb5e4137c

Quite peculiarly, the original bash script had no Open Source license. It is a moral crime to use such Closed Source Licensed script on GNU Linux machines. Basically it is not required in most cases, still, here is how to run it :

 # download it and save at $HOME, take that the file's name is fonts.sh
 # chmod it (os x, all linux and bsd)
chmod +x fonts.sh
 # run it
./fonts.sh

1

2

3

4

5

# download it and save at $HOME, take that the file's name is fonts.sh

# chmod it (os x, all linux and bsd)

chmod +x fonts.sh

# run it

./fonts.sh

That is all you were probably searching for.

Tagged With download font google localy , google font local , google fonts locally , how to download and use google fonts css , how to save the cdn google fonts codings locally in project , https://developers google com/fonts/faq , use google fonts locally , Using google fonts locally

How To Use Google Font Locally

How To Use Google Font Locally – Understand the Basics

How To Use Google Font Locally – Methods

This Article Has Been Shared 8017 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

How To Use Google Font Locally – Understand the Basics

How To Use Google Font Locally – Methods

This Article Has Been Shared 8017 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to How To Use Google Font Locally

Take The Conversation Further ...