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 : www.google.com/webfonts
first thing you have to do is select a font ! , browse though the fonts gallery and choose !.
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=’http://fonts.googleapis.com/css?family=Varela&v1′ rel=’stylesheet’ type=’text/css’>
Or you can use as a import to the css file as,
@import url(http://fonts.googleapis.com/css?family=Varela&v1);
<script type=”text/javascript”>
WebFontConfig = {
google: { families: [ ‘Varela’ ] }
};
(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>
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