External font not loading correctly CSS - css

Question

My CSS custom font doesn't load onto the page when you load my website. At least, not until you click "home" or one of the other tabs. Anyone have any idea why this is and how to fix it? I used
#font-face {
font-family: OpenSansLight;
src: url(OpenSans-CondLight.ttf);
}
#font-face {
font-family: OpenBold;
src: url(OpenSans-CondBold.ttf);
}
#font-face {
font-family: OpenRegular;
src: url(OpenSans-Regular.ttf);
}
And
body, html{
background-color: #FFF;
margin:0;
padding:0;
height: 100%;
width:100%;
font-family:"OpenSansLight";
}
The font doesn't load until I click a link within my website. Anyone have any idea why?
EDIT: Still trying to resolve this... No dice so far.
Second edit: People keep telling me to check if the font is in the right place. IT IS. And everything works. But not upon loading the page, for some unknown reason. hence my question. Please don't answer if you don't even read my question.
Third edit: Another few hours of fiddling have not resolved the issue. I tried expanding the support of the fonts by using
#font-face {
font-family: 'OpenRegular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
But still, the same thing happens.
Noteworthy: Firebug greys out the font when inspecting it when it's not showing, but turns blue and kicks in when I click home or one of the other tabs and the font works.
Fourth edit: A few more days have passed and I'm still struggling with this problem. It's driving me insane. Please help me. I've tried every single possibility on W3C, Google results, Stack Overflow and every suggestion, yet nothing works for me. I'm sure my code is correct but it just won't load on the first try no matter what I try.

Answer 1

Make sure that the CSS file and the font files are in the same directory, if not either put them in the same directory or amend the CSS to have the correct path to the files
#font-face {
font-family: OpenSansLight;
src: url(path/to/OpenSans-CondLight.ttf);
}
#font-face {
font-family: OpenBold;
src: url(path/to/OpenSans-CondBold.ttf);
}
#font-face {
font-family: OpenRegular;
src: url(path/to/OpenSans-Regular.ttf);
}