@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?

回答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;
}

回答2:

Run your fonts through the FontSquirrel generator and it will convert them to the various formats supported by different browsers.

It should also give you a blob of CSS that you can use, just adjust the paths to the font files.

http://www.fontsquirrel.com/fontface/generator

回答3:

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.

回答4:

Try this:

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

In your code you have two folder: fonts and font, in my example I have used fonts

回答5:

Easy game. When loading it, you should out the name between ' ':

font-family: 'test';

This will surely work.