@font-face not working on pages but, is on blog posts…

Hello all,

I’m hoping someone can tell me if they’ve ran into this issue before and hopefully — how to remedy it.

I started developing my own them for my site (working locally). Everything has been going pretty smoothly. I inserted some ‘@font-face’ tags and loaded the appropriate fonts into the directory and inserted the correct CSS code:

————————————

@font-face {
	font-family: 'CooperBlackFSItalic';
	src: url('CooperBlack-Italic-webfont.eot?') format('eot'),
	     url('CooperBlack-Italic-webfont.woff') format('woff'),
	     url('CooperBlack-Italic-webfont.ttf')  format('truetype'),
	     url('CooperBlack-Italic-webfont.svg#webfontiUZQre9c') format('svg');
	font-weight: normal;
	font-style: normal;
	}

#main-nav { background-image: -moz-linear-gradient(top, #2b2b2b, #000); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2b2b2b),color-stop(1, #000)); width: 970px; height: 65px; margin: -115px -10px 50px -10px; float: right; border-top: 3px solid #000; position: absolute; box-shadow: 0 2px 12px #666; }
#main-nav ul { list-style: none; margin: 0 10px 0 10px; padding-right: 20px; float: right;}
#main-nav ul li { font-family: 'CooperBlackFSItalic', Arial, sans-serif; font-size: 30px; display: inline; float: left; position: relative; height: 65px; color: #fff; text-shadow: 1px 1px 1px #000; padding: 10px 15px; }
#main-nav ul li a { color: #fff; }
#main-nav ul li a:hover { color: #fff000; text-shadow: 1px 1px 2px #000; }

————————————

Voila, it was working fine on the home page and even on the single post pages. Then I clicked on the ‘about’ page I made. The items I had targeted (the main menu, h2 tag and a few other areas) weren’t loading the correct fonts and defaulted to the backup font. The sidebar didn’t seem to have issues throughout the site. My menu resides at the bottom of my header page like so…

————————————

<div id="main-nav">
<?php wp_nav_menu(array('menu' => 'Main Menu')); ?>
</div>

————————————

For the life of me, I can’t figure out for the life of me why the menu messes up on the additional pages but, not on the blog pages. Do I need to target the additional pages somehow with CSS? Has anyone ever ran into this before?

This is my first attempt at creating my own theme so, any help is greatly appreciated.

Thanks in advance.