Can't get @font-face to work with Theme Options

So far I can't get the @font-face feature to work Using Atahualpa 3.4.1 with WordPress 2.8.3. - Is there a special folder location for fonts I should be using or creating?
Tested @fontface on Blog Title here: http://testblog.toknow.us - with Firefox 3.5 in XP with the following steps:

Uploaded the free TrueType Graublau Sans Web plus the LidoSTF font to my hosting server in this folder: http://testblog.toknow.us/wp-content/fonts
Added the following in Atahualpa Theme Options-Add HTML/CSS Inserts

/* Graublau Sans Web (www.fonts.info) */

@font-face {
font-family: Graublau Sans Web;
src: url(http://testblog.toknow.us/wp-content...raublauWeb.otf) format("opentype");
}

@font-face {
font-family: Graublau Sans Web;
src: url(http://testblog.toknow.us/wp-content...lauWebBold.otf) format("opentype");
font-weight: bold;
}

* LidoSTF */

@font-face {
font-family: LidoSTF;
src: url(http://testblog.toknow.us/wp-content/fonts/LidoSTF.otf) format("opentype");
}

@font-face {
font-family: LidoSTF;
src: url(http://testblog.toknow.us/wp-content...idoSTFBold.otf) format("opentype");
font-weight: bold;
}

Using Atahualpa Theme Options/Style & Edit Header Area/Blog Title - inserted "Graublau Sans Web" as the first font-family

I have the same font working ok on a static page here on the same domain with the same css code:
http://toknow.us/testfonts/testfonts.html

The Blog Title should display in Graublau Sans Web - but so far no go.
(The lower case g is very distinctive)

Thanks - Sam