How to use custom/nonstandard fonts with Google font API?

Well as web pages increased, all start making demands more and more, some time before there are only few standard font we used to develop web pages, coz we all know if we will use non standard fonts on our website so our page content look different on all computer’s as per font availabilities on that computer.

But now time has been changed as now we have many ways to add non standard fonts on website and that look same on all computer ‘s even that font available on that computer or not.

here is 1st Solution

Style sheet, you need to use these technique to use non standard fonts.

@font-face {
font-family: ‘Tangerine’;
font-style: normal;
font-weight: bold;
src: local(‘Tangerine Bold’), local(‘Tangerine-Bold’), url(‘../font/Tangerine.ttf’) format(‘truetype’);
}

as you seen above that font must be store on your domain or you can give full path of any font. So after add this class on your css you can call “Tangerine” any where and all font changed as per new font style.

h1, h2,  {
font-family: ‘Tangerine’, arial;
font-size:40px;
}

So now your sites all h1, h2 will change.

2nd Solution by Google Font API

Google has font directory and api to use non standard fonts on your website pages. click here for Google font directory.

For using google font api, you need to use

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

use this line in your website page  and then call this font in your css

h1, h2,  {

font-family: 'Tangerine', arial;

font-size:40px;

}

enjoy