Rich fonts for your site and blog – Google Web Fonts

Rich experience for web users is a foremost need in present web applications, except for colors and representation of data , typography is also plays a major role. Cool fonts in your pages will provide a nice look for your web or blog.

Till some time back web was supporting limited fonts such as Arial and times new roman , so services such as typekit was developed. But as these services were paid  subscription.


So , Google provided with it’s solution of using large verity of fonts in web sites. Its Google web fonts API . and it’s a free service.

Service can be accessed using :

Step 1 : Select your stuff !

first thing you have to do is select a font  ! , browse though the fonts gallery and choose !.


Step 2 : Embedding fonts

you can embed these fonts in your web font using several ways,

Let’s think that your selected font is ‘Varlea’


You can directly import the font style as a stylesheet import

<link href=’′ rel=’stylesheet’ type=’text/css’>


Or you can use as a import to the css file as,

@import url(;



<script type=”text/javascript”>

WebFontConfig = {

google: { families: [ ‘Varela’ ] }


(function() {

var wf = document.createElement(‘script’);

wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +


wf.type = ‘text/javascript’;

wf.async = ‘true’;

var s = document.getElementsByTagName(‘script’)[0];

s.parentNode.insertBefore(wf, s);




Step 3 : Using the Fonts

And create your own css classes as a example by giving the font name your imported,

h1 { font-family: ‘Varela‘, arial, serif; }

You can look into the detail documentation provided by Google here


Share this post