Question about non-standard fonts on a site

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 ;
}