@font-face not loading font

Question

I am trying to use @font-face and for some reason it is failing to work (IE9, Chrome and Firefox). I have made sure that I am pointing to the correct directory when loading the font however it still doesn't seem to work.

Here is my code:

@font-face{
font-family: 'test';
src: url('../fonts/FontName.ttf'),
         url('../fonts/FontName.eot');
font-weight: normal;
font-style: normal;
}

And calling it:

#header{
text-align:left;
padding: 10px;
font-family:test;
}

What am i doing wrong?

Answer 1

Internet Explorer uses the version .woff of the font, which is not used by you in the code, instead of using the version .eot. I used the @font-face generator tool from fontsquirrel to get all the different font variations

The output should look something like this:

@font-face{
font-family: 'test';
src: url('../fonts/FontName.eot'),
     url('../fonts/FontName.eot?#iefix') format('embedded-opentype'),
     url('../fonts/FontName.woff') format('woff'),
     url('../fonts/FontName.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Answer 2

in addition to what people have been saying about the different types of fonts (and using the format() element along with url()), it would also be worthwhile to check your css inhertiance to make sure that nothing is setting #header or the elements inside of it to font-weight: bold. Since you only specify a normal weight/normal style font, if something makes it bold, the font won't show up.