Custom font via CSS

Question

I am learning php, html and css now and I'm trying to use a custom font on my site. I found the @font-face property that allows to make that, but it doesn't work. What am I doing wrong? css:

@font-face {font-family: LazurskiCTT;src:url(../sources/fonts/ie/LazurskiCTT Regular.eot);}
/*IE*/ 
@font-face {font-family:LazurskiCTT;src:url(../sources/fonts/LazurskiCTT Regular.Ttf);}
/*Other browsers*/
#myFonts{font-family:LazurskiCTT;}

html:

<p id="myFonts">Lazurski</p>

Maybe it's because I use it on my local machine? I run it in FireFox.

Answer 1

The easiest (and best) way to get it to work is to use fontsquirrel's generator:

http://www.fontsquirrel.com/fontface/generator

Answer 2

Assuming your font path are correct try this. Quote's... some say it not necessary, but i find it to work best. In some cases my CSS breaks without the quotes (Especially when white space is involved in path).

Note: Use this site to convert your ttf to eot for it to work on IE (Place both .ttf & .eot in same directory). http://ttf2eot.sebastiankippe.com/

@font-face {
    font-family: "LazurskiCTT"; 
    src:url("../sources/fonts/ie/LazurskiCTT Regular.eot"); /*IE*/
    src:url("../sources/fonts/LazurskiCTT Regular.Ttf") format("truetype"); /*Non-IE*/

}

This works for my site. Hope it works for you too.