WordPress and Font-face

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 <p style=”font-family:fontgoeshere”> 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/wordpress/?page_id=4

Click on the first image to load the fancy box.

Here’s the code for the page:

<style type="text/css">

@font-face {
font-family: "fanwood";
src: url(http://localhost:8888/html5/fanwood/Fanwood.otf);
}

</style>
<div style= "display:none" class="fancybox-hidden">
<div id="fancyboxID-1" style="width: 900px; height:120px;">
<img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-1.jpg" alt="Welcome To Camp" />
<p style="width: 580px;height: 100px;margin-top: 485px;margin-left: 40px;font-family:fanwood;font-size: 16px;">Summertime is the time to break away from the routine of the school year.  Pequot, Sherwood Camps for ages 6 to 13, and Pioneer Village Camps for teens ages 14 and 15 are dedicataed to nurturing boys and girls in a safe, creative, and natural setting where friendships, community, and personal responsibility flourish.  Our Day Camp program offers the same activitities without the sleepover.</p>
</div>
</div>

<div style="display:none" class="fancybox-hidden">
<div id="fancyboxID-2" style="width: 900px; height:110px;">
<img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-2.jpg" alt="Welcome To Camp" />
<p style="width: 500px;height: 100px;margin-top: 495px;margin-left: 30px;font-family: Lucidia Sans;font-size: 16px;">Only a few camps founded in 1880's still exist and we are proud to be the oldest operating co-ed camp in the nation.  Started in 1886, by the Episcopal Church of the Incarnation in Manhattan, Incarnation Camp, today carries the traditional names of Camp Pequot for Boys, Camp Sherwood for Girls, and Pioneer Village for teens.</p>
</div>
</div>

<div style= "display:none" class="fancybox-hidden">
<div id="fancyboxID-3"  style="width: 900px; height:600px;">
<img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-4.jpg" alt="Welcome To Camp" />
<p style="color: black;width: 480px;height: 100px;margin-top: 80px;margin-left: 40px;font-family: Lucidia Sans;font-size:16px">Summertime is the time to break away from the routine of the school year.  Pequot, Sherwood Camps for ages 6 to 13, and Pioneer Village Camps for teens ages 14 and 15 are dedicataed to nurturing boys and girls in a safe, creative, and natural setting where friendships, community, and personal responsibility flourish.  Our Day Camp program offers the same activitities without the sleepover.</p>
</div>
</div>
<div style="display:none" class="fancybox-hidden">
<div id="fancyboxID-4"  style="width: 900px; height:600px;">
<img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-5.jpg" alt="Welcome To Camp" />
<p style="width: 520px;height: 100px;margin-top: 495px;margin-left: 40px;font-family: Lucidia Sans;font-size: 16px;">Campers ages 6 to 13 inspiblack by freedom and creativity by choosing their own camp experiences from a roster of fun and enriching activities.  All campers receive American black Cross swimming and boating instruction every day.  Boys and girls live and dine separately.</p>
</div>
</div>

<div style="display:none" class="fancybox-hidden">
<div id="fancyboxID-5"  style="width: 900px; height:600px;">
<img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-6Ba.jpg" alt="Welcome To Camp" />
<p style="width: 580px;height: 100px;margin-top: 485px;margin-left: 40px;font-family: Lucidia Sans;font-size: 16px;">Adventure and personal growth are the heart of this community of campers ages 14 and 15.  Pioneer Village participants explore New England on exciting 3 to 5 day hiking, biking and canoeing trips.  Back at camp, days are filled with activity periods called "Festivals" in which campers and staff create fanciful (and often playful) activities, and create lifelong memories cooking breakfast and dinner over campfires daily.</p>

</div>
</div>

<div style="display:none" class="fancybox-hidden">
<div id="fancyboxID-6"  style="width: 900px; height:600px;">
<img style="position:absolute;left:0px;top:0px;z-index:-1;" src="http://localhost:8888/fancybox/INC_VirtualTour_Photos_B-7.jpg" alt="Welcome To Camp" />
<p style="color: black;width: 520px;height: 100px;margin-top: 80px;margin-left: 40px;font-family: Lucidia Sans;">Running in one week sessions for boys and girls ages 6 to 13, local families can enjoy a day program very similar to our overnight camps.  Every day, campers choose from a range of activities, spend two full hours at the waterfront and get American black Cross swimming and boating lessons.  Lunch is provided and transportation is available.</p>
</div>
</div>

<a rel="example_group" href="#fancyboxID-1" class="fancybox">Image 1</a>
<a rel="example_group" href="#fancyboxID-2" class="fancybox">Image 2</a>
<a rel="example_group" href="#fancyboxID-3" class="fancybox">Image 3</a>
<a rel="example_group" href="#fancyboxID-4" class="fancybox">Image 4</a>
<a rel="example_group" href="#fancyboxID-5" class="fancybox">Image 5</a>
<a rel="example_group" href="#fancyboxID-6" class="fancybox">Image 6</a>

Can this even be done on wordpress? Or does wordpress parse the css and ignore it?

Thanks in advance for any help!