CSS Font Embedding

this is how to embed a font in css.

CSS3 supports font embedding now. this means, since firefox 3.5, opera 10, safari 3.1 and chrome 2.0 it is supported to embed a ttf font into a stylesheet and show the font correctly allthough the viewer does not have the font installed on his or her computer. of course there is an exception for microsofts IE. they support font embedding since version 4.0 but use their own .eot format which is not supported by any other browser and they don't comply with the css3 standard.

so this is how it's done for standard compatible browsers:

download a free font for example from http://www.fontex.com as ttf format. (other formats are supported by some browsers, but ttf is the only one supported by all non-ie browsers so far.

create the eot font for ie from a ttf using an online converter

upload both ttf and eot files to your webserver and embed it with the folowing lines in your css stylesheet:

@font-face { 
    font-family: " your FontName ";  
    src: url( /location/of/font/FontFileName.eot ); /* IE */  
    src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  
	 
/* THEN use like you would any other font */  
.yourFontName { 
    font-family:" your FontName ", verdana, helvetica, sans-serif;  
}