Clever Geek Handbook

@ font-face don't load font

I'm trying to use @ font-face and for some reason doesn't work (IE9, Chrome and Firefox). I made sure I was pointing to the correct directory when loading the font, but it still doesn't 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?

+3


source to share


4 answers


Internet Explorer uses the .woff version of the font you are not using in your code instead of using the .eot version. I used the @ font-face generato r tool from fontsquirrel to get all the font options

The result 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;
}
+4


source


in addition to what people have said about different types of fonts (and using an element format()

together with url()

) it would also be helpful to check your css property to make sure nothing is set #header

or elements inside it are on font-weight: bold

. Since you are only specifying a standard font with normal weight / normal style, if something makes it bold, the font will not display.



+1


source


Try the following:

@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 folders: fonts and fonts, in my example I used fonts

0


source


Run fonts with the FontSquirrel generator and convert them to different formats supported by different browsers.

It should also give you a piece of CSS you can use, just edit the paths to the font files.

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

0


source






More articles:


All Articles