Font Working on One page and not another -

Hey guys, so im re-making my portfolio website, and im not quite done, but i have seem to run into a small problem that is bothering me.

On one page the font is how it should, and then on another page the font seems to be alot smaller and not the right font.

If you look at http://armstrongwebandgraphic.com/Aarons-New-Site/contact.html

that is how i want the font to look ( at the top )

but if you look at http://armstrongwebandgraphic.com/Aarons-New-Site/portfolio.html

this is how its showing up on the portfolio pages.
Any reason for this ??

And the CSS is

@charset "UTF-8";
/* CSS Document */


/* -------------------------------------------------------------------------------------- SMALL RESET */
*{ outline:none; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

ul{ list-style:none; }

a, a:hover{
outline:none;
text-decoration:none;
color:inherit;
}

img{ border:none; }


body { background:url(bg.jpg) top center no-repeat; background-color:#000; background-attachment:fixed; }

#header { background:url(header.jpg) repeat-x; height:115px; width:100%; margin:0 auto; margin-bottom:10px; }

#upper-header { height:43px; }

#phone { float:right; margin-top:10px; width:270px; }

h1 { color:#09F; font-family:"Arial Black", Gadget, sans-serif; font-size:18px; }

h2 { color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:16px; float:left; margin-top:5px; text-align:right;}

#phone-pic { float:left; background:url(phone.png) no-repeat; width:26px; height:24px; margin-right:5px; text-align:right;}

#lower-header { height:72px; }

#logo { float:left; background:url(logo.png) no-repeat center; width:356px; height:72px; }

#nav { width:644px; height:72px; float:left; }

#nav ul { float:right; margin-left:30px; }

#nav ul li { float:left; line-height:72px; padding-right:10px; padding-left:10px; background:url(spacer.png) no-repeat right; height:72px; }

#nav ul li:hover { background:url(menu-rollover-bg.jpg) repeat-x; }

#nav ul li.active { background:url(menu-rollover-bg.jpg) repeat-x; }

#nav ul li.active2{ background:url(rollover-glow.png) no-repeat top center; height:52px;}

.home { background:none; height:52px; padding-top:20px;}

.home:hover { background:url(rollover-glow.png) no-repeat top center; height:52px; }

#slider { height:431px; width:100%; margin-bottom:20px; }

#slider-inside { background:url(slide-bg.png) no-repeat; height:431px; margin-top:30px; }

#slider-inside-slide { margin-top:15px; margin-left:15px; float:left; }

#latest-work { height:428px; width:100%; margin-bottom:20px; }

#latest-work-inner { height:428px; background:url(latest-projects.png) no-repeat; }

#latest-title { background:url(latest-projects-title.png) no-repeat; height:14px; width:200px; margin-top:30px; margin-left:20px; float:left; }

.project { margin-left:20px; float:left; margin-top:30px;}

.project-inner { background:url(project-bg.png) no-repeat; width:299px; height:294px; float:left; margin-right:25px; }

.project-picture { float:left; margin-left:15px; margin-top:15px; }

.project h1 { float:left; padding-left:15px; padding-top:10px; font-family:Arial, Helvetica, sans-serif; color:#CCC; font-size:12px; }

.project h2 { float:left; padding-left:15px; padding-top:5px; padding-right:10px; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:11px; text-align:left; }

#services2 { height:266px; width:100%; margin-bottom:20px; }

#services-inner2 { height:266px; background:url(services-bg.png) no-repeat; }

#services-title { margin-top:20px; margin-left:20px; float:left; background:url(our-services.png) no-repeat; width:999px; height:15px; }

.services { float:left; margin-top:20px; width:999px;}

.services-inner { background:url(service-bg2.png) no-repeat; width:196px; height:195px; float:left; margin-right:30px; margin-left:20px; }

.services-picture { float:left; margin-left:15px; margin-top:15px; }

.services h2 { float:left; padding-left:15px; padding-top:5px; padding-right:10px; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:11px; text-align:left; }

#footer { clear:both; background:url(footer.jpg) repeat-x; height:69px; }

#footer-interior { height:69px; }

#footer-logo { background:url(logo-footer.png) no-repeat; width:376px; height:28px; margin-top:10px; float:left; }

#copyright { float:left;color:#CCC; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin-left:15px; }

#footer-menu { float:right; font-size:12px; color:#ccc; font-family:Arial, Helvetica, sans-serif; width:300px; margin-top:10px;}

#footer-menu a { color:#ccc; }

#footer-menu a:hover { color:#09F; }

#interior-nav { background:url(interior-nav-bg.png) no-repeat; height:73px; width:1000px; margin-top:20px; }

.nav-button { margin-left:20px; margin-top:20px; background:url(nav-buttons.jpg) no-repeat; width:136px; height:34px; float:left; padding-top:10px; text-align:center; color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

#inside-pic { float:left; margin-left:50px; padding-right:10px; padding-bottom:
10px; padding-top:10px; }

#inside-pic2 { float:right; margin-right:50px; padding-left:10px; padding-bottom:
10px; padding-top:10px; }

#interior-top { background:url(interior-bg-top.png) no-repeat; height:320px; width:1000px; }

#interior-top h1 { color:#09C; font-family:Arial, Helvetica, sans-serif; font-size:36px; float:left; margin-left:50px; margin-top:40px; }

#interior-top h2 { color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:18px; float:left; margin-left:50px; margin-top:20px; clear:both; padding-right:40px; text-align:left;}

#interior-middle { }

#interior-middle2{ background:url(interior-bg-middle.png) repeat-y; float:left; }

#interior-middle h1 { color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:50px; padding-top:20px; padding-right:40px; text-align:left;}

#interior-bottom { background:url(interior-bg-bottom.png) no-repeat; width:1000px; height:50px; margin-bottom:20px; clear:both; }

#valitator { float:right; clear:both; width:110px; margin-right:20px; }

.container { margin:0 auto; width:1000px; }

.item { background:url(project-bg.png) no-repeat; width:299px; height:294px; margin-left:20px; padding-top:20px; float:left; }

.item-picture { float:left; width:274px; margin-left:15px; margin-top:15px; }

.item-title { float:left; width:274px; font-family:Arial, Helvetica, sans-serif; color:#ccc; font-size:16px; padding-left:15px; padding-right:10px; margin-top:5px; }

.item-desc { float:left; width:274px; font-family:Arial, Helvetica, sans-serif; color:#ccc; font-size:12px; padding-left:15px; padding-right:10px; margin-top:5px; }

and there is also a gallery css which can be found here:

http://armstrongwebandgraphic.com/Aarons-New-Site/prettyPhoto.css

I have a feeling that it has something to do with prettyPhoto.css Cause it only happens on the pages that have this css linked to it.

But i cant find out what.

any help ?

thanks

nvm, found the problem, was in the top java.
thanks for any help in advanced.

I can't see any difference between those two pages, what browser are you using?

One thing you can try is to add !important to the font properties, to enforce that those are used in the event of any clashes between stylesheets.
#somediv { font-size: 12px!important; }