Naeem Mahmood

I was little amazed when i first used @font-face. its great and little slow thing for your website but its help me great, because i used it when i was having a purchased font. its only the choice remaining when you will not find a font in font list or Google fonts. Google fonts is another great way to call some font and use that in your application. but that one is also little slow when page loads. if sometime calling fails, then your web application will show defaults fonts other than Google fonts. and also may be some of you also heard about Cufón, then don’t use use that shit. lot of things may be helpful about Cufon but not actually suggested.

let’s move further to @font-face. you got a custom font or buy it on internet and have a plan to use it in your web application. then you must consider @font-face. in this example i am using Gotham HTF. its not free font. this type of cases you may need @font-face.

Put this code to your style-sheet and do modifications according to your needs.

@font-face {
font-family: 'Custom Gotham HTF';
src: url("GothaHTFBooCon.eot"); /* FOR IEs */
src: local('Custom Font'), url('GothaHTFBooCon.ttf') format('truetype'); /* for other web browsers */
}

in above you may declare font-family of your choice and for Source give url of font where its exist. here you may notice that for IE browser we need to convert our font to .eot extension . you can convert you font from .ttf to .eot on this Website. after converting this will also provide you code i have pasted above. in above code first source is for IE browsers and 2nd source is for CSS3 browsers.

Now you are ready to use this font in your style-sheet or wherever you want.

/*Use font in stylesheet*/

.myclass
{
font-family: 'Gotham HTF';
font-size:medium;
color:#000;
}

You may also can use:

/*Use font with other font-family*/

.myclass
{
font-family: Custom Gotham HTF, Verdana, Geneva, sans-serif;
font-size:medium;
color:#000;
}

You will notice one thing i already told you, it will make your website little slow. but its great choice for you when you are using it in you application easily.