Google Web Font API – A super cool way to make use of new fonts in your web pages

Hello,

This post is about Google Web Font API. Google make things simple for any organization or individual thats why lot of people love this company.

One of many initiative from Google is its Web Font API.

As a Programmer I’ve using Fonts like Arial, Calibri, Sans-serif etc to style my DOM elements, but if I ever need a non standard font then I would have to buy it and import it within my CSS code as font-faces.

With Google Fonts we get hold of many Top end fonts for FREE. People contribute to the project and thus we got to use them.

This post is about how to use Google Fonts

First option is to

Link directly to the CSS files

This options is very simple and you just need to create a link to the font definition files.

One of my personal favorite font is Monda quite new but gives crisp to your Header tags

So to include the CSS Files you just need to click “Quick use” and copy the link definitions as shown below

Alright so that was pretty simple. But here is something that you would like to know.

When doing things like above there are two HTTP requests involved. Let me tell you what it means.

In you browser just paste the URL from link href directly in your browser address bar you will get something like this

No as you can see that font-face have a property called src which is pointing to another themes.googleusercontent.com URL so the first HTTP request was to load the font-face definition and second was to load actual font from themes.google…..

But if would just copy font-face definition in your CSS then that would save you ONE http request.

Usage

You can use Monda on an H1 tag as shown below

Second option is to

Use CSS @import

and you can simple add reference to our Monda font as shown below

This also will result in couple of http requests so above rule applies to cut http request to ONE

Third option is either use

FontLoader or Javascript provided by Google

FontLoader is a very lightweight Javascript that you can make use of. Using JavaScript is not recommended if you are wary of JavaScript being disabled, but you can make use of it to fight FOUT (flash of unstyled text)  Here is an interesting read on this topic (http://paulirish.com/2009/fighting-the-font-face-fout/)

Here is how you can go about it

wf-loading is the class that get applied to the element. So notice when the fonts are “loading”, you can use that class name to hide the text. Then when they are shown, make them visible again. That is how FOUT is controlled. This won’t really get rid of it but it will minimize the effect on most occasions.

Script from Google that you can include in your head element is

So this was just and introduction to use Google Font API and bottom line is you can just pick any font in their library and use it. Absolutely FREE.

Tip: Try to use fonts which are easy on bandwidth i.e. that has low loading time and smaller overall size. So be careful with those. Do not include gazzilions of fonts in your page. It will only increase page load time because Fonts will have to downloaded before they are applied.

Resources

www.google.com/webfonts

I hope that this helps.

Please leave your comments if you would like to add something to this article

Cheers.

 

 

Leave a Reply

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