ReallyGoodPie ReallyGoodPie - 1 year ago 123
CSS Question

@font-face not loading font

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 Source

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

So, te code:

@font-face{
font-family: 'test';
src: url('../fonts/Minecraft.eot'),
     url('../fonts/minecraft.eot?#iefix') format('embedded-opentype'),
     url('../fonts/Minecraft.woff') format('woff'),
     url('../fonts/minecraft.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download