Question about non-standard fonts on a site - css

Question

I am trying to use a custom font for the text of part my site and am having trouble figuring out why my script isn't recognizing the font. I uploaded 'ParisJetAime.otf' to my /font/ folder off my main html folder and I included this in my script:
#font-face {
font-family: h1style;
src: url(font/ParisJeTAime.otf)
}
#text {
font-size: 30px;
color: #ffffff;
font-family: ParisJeTAime.ttf;
margin: 220px auto auto 130px
}
My test div tag looks like this:
<div id="main">
<form method="post" action="">
<div id="text">
Font Test
</div>
<input type="text" name="q" id="search" />
<input type="submit" name="submit" id="submit" value="Go!" />
</form>
</div>
Am I missing a piece of code? The text displays but in standard Tahoma rather than the one I want. Thanks!
EDIT:
USed fontsquirrel and have this as new code:
#font-face {
font-family: 'ParisJeTAimeRegular';
src: url(fonts/'parisjetaime-webfont.eot');
src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
url(fonts/'parisjetaime-webfont.woff') format('woff'),
url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
font-weight: normal;
font-style: normal;
}
#text {
font-size: 30px;
color: #ffffff;
font-family: parisjetaime-webfont.ttf;
margin: 220px auto auto 130px ;
}
still no luck - any ideas?

Answer 1

You are using it wrong, it should be #font-face and the font-family defines the name you want to use, so in your case:
#font-face {
font-family: 'ParisJeTAime'; // the name you want to use
src: url('font/ParisJeTAime.otf');
}
#text {
font-family: 'ParisJeTAime', Arial, etc.; // the name you defined for your font
}
Also note that the #font-face declarations need to be on the top of your css file, before any other style declarations.
Apart from that, you are going to run into cross-browser problems as all browsers use different types of fonts so just the .otf is not going to cut it (I don´t even know which browser uses .otf...). You´ll need a list of different source files (.eot, .woff, .ttf, etc.) to get it working in the most used browsers.
Edit: After your edit, you are still using it wrong, you need an # instead of an # and you need to use the correct name in your #text:
#font-face {
font-family: 'ParisJeTAimeRegular';
src: url(fonts/'parisjetaime-webfont.eot');
src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
url(fonts/'parisjetaime-webfont.woff') format('woff'),
url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
font-weight: normal;
font-style: normal;
}
#text {
font-size: 30px;
color: #ffffff;
font-family: 'ParisJeTAimeRegular';
margin: 220px auto auto 130px ;
}

Answer 2

Check this for fonts that are not web safe - fontsquirrel

Answer 3

One thing you need to figure out is if you have the rights to use that font. The use of fonts online (both in practice and licensing issues) is tricky. Luckily, there are a few services that makes this easy (and legal).
http://typekit.com/
http://www.google.com/webfonts