CSS tricks on styling fonts

Styling CSS using External Fonts:

This might be simple thing  if you know the tricks on how to add desired fonts to the web server, but some times if you are new to this situation, it may stuck you for a while.

Take a simple example, the client want to have Helvetica font into his site. You may be smarter enough to add the helvetica font like 

.myClass{
         font-family: helvitica;
}

But it will not work, because Helvetica is not enlisted in default font list. Your browser will try to find the source for Helvetica font, when it does not find it , by default it will take Arial font which is some what similar to it but not exact.

Another thing to notice is , Helvetica is not a free font , you need to pay ($30- $50) for it. Wow, now what to do !!! 
Often every  one loves Google, so hit the search for Helvetica font. When you find it , download . This  might be in the form of fontName.ttf extension, again  you can not use this font for the web purpose  because it is not web compatible format . So you need to convert this into web compatible formats like - .eot, .svg, .woff, & .ttf too. For achieving this task, you can get some online web sites where you can submit your font & get the converted file attachment back with the compatible fonts.

Obviously, you don't want to loose money for just a font, if you are freelance. So hold down, take a glass of water & long breathe. Here is the way.

You can use this site- http://www.fontsquirrel.com/tools/webfont-generator   , Add the font here & Convert.


After converting & getting all the useful web fonts , you can add these fonts to your web server in some directory or create your own directory & name if fonts/ .

Now After doing this task, all you need is, to add below script to the top of your css file as below.

@font-face {

font-family: 'Helvetica';

src: url('fonts/helvetica.eot');

src: url('fonts/helvetica.eot?#iefix') format('embedded-opentype'),

url('fonts/helvetica.woff') format('woff'),

url('fonts/helvetica.ttf') format('truetype'),

url('fonts/helvetica.svg#helvetica') format('svg');

font-weight: normal;

font-style: normal;

}

A simple example of using  Helvetica Neue CE35 Thin font 

       Now your helvetica font has become fully functional . Include this css file & style your document with the font name give at the top. 

Note: you can give any name of your desire,  to the font you have newly added, But don't forget to give the same name while styling the document with classes or IDS. 



I hope this document will be surely helpful ,when you get drown into styling the fonts. Any feed backs, & suggestions are hearty welcomed. Enjoy up..!!!