Use, Host and Download Google fonts on your own website

Update:

I have found a much easier way to download and use google fonts on your local computer or use it on a local area network website.

1. you will need to select the font you wish to download from the google fonts site
2. go to localfont website and download a zip copy of the font
3. unzip the downloaded font folder and take note of its location
4. at the localfont website, click the “show CSS for integration” and copy it to your css style sheet file
5. edit the css to match with your actual local copied font file from #3 above.

i recommend doing the steps above as its way easier and better unless if you have some other reasons not to.


Original Post

To be able to use or download Google fonts on your own website or to install it on your local computer you will need to download them first. Google fonts are supplied based on the device you use to connect to it, so if you are using Chrome to browse the fonts, you will most likely see the woff version of the fonts. To be able to download the different font types like ttf, woff, svg or eot; you will need to change your browsers user-agent and download the font using those settings.

I will describe the steps as detailed as possible since i know some of you might not have any web experiences.

Download Google Fonts and use it on your websites

1. Navigate to the Google fonts website and choose the font you needed.You will see 3 buttons beside the blue add to collection  button on each font presented, click on the quick use  button to select which style you want to include on your download.
googlefonts

2. Choose the styles you want and scroll down to view the instructions in linking the font to your webpage online. Take note of the href attribute of the link tag as we will be needing it to download the actual font. Copy the value of the href and paste it into a blank browser window or tab. in my case its: http://fonts.googleapis.com/css?family=Roboto

googlefontsurl

 

3. After pasting the code to the browser window, you will see the CSS of the font for the platform you used to view it. If you are using an android device you will a different font type, SGV, TTF, EOT, and in this case WOFF for Chrome in Windows.

googlefontsroboto

4. Download the actual font by copy/pasting the value in the CSS url property from above to a blank browser window. Rename and save the font together where you saved your html and CSS files. To apply the font to your HTML document just copy and paste the CSS code from above like below.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Roboto Font</title>
	<style type="text/css">
	@font-face {
	  font-family: 'Roboto';
	  font-style: normal;
	  font-weight: 400;
	  src: local('Roboto Regular'), local('Roboto-Regular'), url(Roboto.woff) format('woff');
	}
	p {
		font-family: Roboto;
	}
	</style>
</head>
<body>
	<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
</body>
</html>

 Download Other Font formats

You will need Google Chrome browser to download the other font formats, SVG, EOT and TTF. Using the same URL from above, revisit the page where you downloaded the font: http://fonts.googleapis.com/css?family=Roboto

Open the console by right-clicking  on an empty space and then choosing inspect element. Show the console by clicking on this icon below:

showconsole

 

Go to emulation tab and click on User Agent. Place a check on ‘Spoof user agent’ and choose ‘other’ on the dropdown like below:

emulation

To download the SVG font format paste the following User agent on the text box below the other  and refresh the page:

Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3

Copy the URL on the CSS code and paste it into a blank browser window to download the font.
robotosvg

 

Here are all the User agent formats:

TTFMozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

EOT: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

SVG: Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3

WOFF: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.16 Safari/537.36

Leave a Reply