Font-face and Wordpress

I'm trying to style a font that is being referenced inline using fancy box on a wordpress blog. Using both chrome and firefox.

I've tried this two ways:

1.) Loading the @font-face on the theme's stylesheet, then adding a in html markup on the page itself. I don't want all of the paragraph text on the blog to load with that font, just the divs inline on the fancybox. I know all the sources are correct because I've tried them in html files and they load perfectly.

2.) I've tried loading the @font-face on the page html markup itself. I add a style and place the call in that style at the top of the page. Then I reference the font-family in the same way that works in the normal html page.

The fact that it is working on a simple html page makes me think I'm doing something wrong specifically in wordpress.

Here is the url to the page: http://elparquenuez.com/sandbox/wordpr开发者_StackOverflow社区ess/?page_id=4

Click on the first image to load the fancy box.

There is little that is correct about this code you have:

                                          <style type="text/css">
<p>@font-face {
font-family: "fanwood";
src: url(http://localhost:8888/html5/fanwood/Fanwood.otf);
}</p>
</style>

Consult http://reisio.com/examples/webfonts/ or http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/, and keep in mind that you're going to want everything on the same domain.