Custom font not displaying correctly - html

Question

I am trying to load a custom font in my website. In my style.css I have the following attributes declared
#font-face {
font-family: billabong;
src: url('./fonts/billabong.ttf');
font-weight: bold;
}
h1.header {
font-family: billabong;
}
And in my html I have the following code;
<h1 class="header">Welcome to</h1>
However, it seems to be defaulting to some other font type so i assume it cannot find it.
The font is back one directory from my css file, and inside a folder called fonts, have i provided the correct path for it to find it? If this is not the issue does anyone know what I am doing wrong?

Answer 1

try adding Apostrophes in the font-family attribute.
font-family: 'billabong';
Also use more formats. not all browsers support ttf.
read more about that here:http://socialcompare.com/en/comparison/browser-fonts-support-comparison
You could export ttf to webfont here: http://www.font2web.com/

Answer 2

I think the only problem here is your directory.
Try first putting your font file all the way up to the same directory as your html file.
Then try this code:
#font-face {
font-family: billabong;
src: url(billabong.ttf);
font-weight: bold;
}
h1.header {
font-family: billabong;
}
If this doesn't work try putting your font-weight:bold; into the header class see if that helps.
If it works then put it back to where you had it. I hate to guess but as i understand you have a fonts file inside your css file. I am assuming that your html file is one directory higher than your css file. In that case you can say
#font-face {
font-family: billabong;
src: url(css/fonts/billabong.ttf);
font-weight: bold;
}
h1.header {
font-family: billabong;
}
You don't need to use apostrophes for your attribute or source url i have made many websites using custom fonts and haven't seen a problem with compatibility and such.
In any case i would always refer to the w3schools website they explain it the best way:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Hopefully that helps.