Getting Started With Google Web Fonts

From writing document to designing a poster or a website, Font is an important thing unless you are an artist. Fonts have a big place in all. The attractiveness of any work depends on fonts itself. Some of the good known fonts are Times New Roman, Aerial, ….. blah blah. Some of them comes pre-loaded with your operating system while some of them comes with some apps, while the remaining one are download by yourself. But this fonts are seen everywhere and are common also. Many of the organization uses them. So if you look on them carefully, you will find nothing new in them. Sometimes of this popular fonts also looks boring many times.

Then what to do?

There are many options available. If you search on Google you may find some of them. But still the problem is that fonts are not free. Maybe you will able to find some free fonts but still you will say that they are not interesting. So here is a good, free and best collection for your fonts need and that’s the Google Web Fonts.

You can visit Google Web Fonts by clicking on following link.

google.com/webfonts

A quick introduction to Google Web Fonts…

Google Web Font Logo

Google Web Font is a font gallery hosted by Google with more than thousands of free web fonts which are 700+ MB in size & still growing rapidly. All of the fonts are open source that means you will not need to pay or take permission for their usage. As stated by Google you are free to download, distribute and use them anywhere you want. You many have already visited this gallery by clicking on above link and may be seen some of interesting web fonts.

How to use them?

OK. You might have seen some fonts and now you fall in love with them and now you want to use them in your documents and/or work. So here are some simple steps. What you have to do is

  1. Select the fonts which you want to download.
  2. Add them to your collection.
  3. Download your collection to your PC.
  4. Once downloaded unzip, open them and click on install.

Example

Consider you want to download font named as Telex.

Step 1: Navigate to Google Web font directory i.e. http://www.google.com/webfonts from your browser.

Step 2: Using search option from left hand side of the webpage, find Telex.

Step 3: Add it to your collection by clicking ‘Add to Collection’ button.

Google Web Fonts-Add To Collection

Step 4: Download that collection to your PC. You will find the download option at top right corner of your screen.

Google Web Fonts-Download Collection

Once you download, just unzip them. Open downloaded fonts one by one and click on install.

Using Google Web fonts For Your Website

It is quite simple to use google web fonts on your website. Let me give an example to show the code. Consider we want to use Telex font on our website. What you have to do is

  1. Visit Web font Gallery
  2. Choose the required font
  3. Click on Quick Use

Google Web Font Quickuse

Now You will see many options for using that web font on your page.

If you are having access to your css (like wordpress.com where you can modify css but not the theme code) then you can use @import

@import url(https://fonts.googleapis.com/css?family=Telex);

If you are having access to theme code (like your website or blogger.com) then you can use slandered code

<link href='http://fonts.googleapis.com/css?family=Telex' rel='stylesheet' type='text/css'>

If you want to integrate this web fonts in your java based applications then you can use javascript to load them

<script type="text/<span class=">// <![CDATA[
javascript</span>">
// ]]></script>
WebFontConfig = {
google: { families: [ 'Telex::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script></div>

All of the above codes will do the same work and that is loading of the webfont, then for applying the loaded webfont to your site you can use

font-family: 'Telex', sans-serif;

This will change the font of selected element to Telex.

Need More Help?

https://developers.google.com/webfonts/docs/getting_started for getting started and

https://developers.google.com/webfonts/docs/webfont_loader for webfont API.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.