@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;
}