14

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?

GoodPie
  • 967
  • 3
  • 23
  • 41
  • http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ – Dom Jan 31 '13 at 15:37
  • I would use a tool like Fiddler2, the F12 Developer Tools (IE), or the Developer Tools in Chrome to look for 404 responses trying to load the font files. Perhaps the path isn't what you think it is. – Cᴏʀʏ Jan 31 '13 at 15:43
  • Error: Resource interpreted as Font but transferred with MIME type application/octet-stream: "file:///C:/Users//Desktop/Website/fonts/Minecraft.ttf". – GoodPie Jan 31 '13 at 15:44
  • 1
    I have answered a similar question here: http://stackoverflow.com/questions/14287465/font-face-not-loaded/14287894#14287894 – 97ldave Jan 31 '13 at 15:44
  • There is little hope getting solutions without some tangible information, such as the URL of the page, so that the problem can be observed and studied. Information about the origin of the font can be essential, too. (It is not uncommon to see broken fonts distributed on the web.) – Jukka K. Korpela Jan 31 '13 at 16:53
  • One thing to note is that a font won't be downloaded until it is actually used. So if you add a new font URl directive, you should also try to use it via CSS or style rules to cause the font to be downloaded. – FoxDeploy Mar 24 '21 at 15:44

5 Answers5

15

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;
}
GoodPie
  • 967
  • 3
  • 23
  • 41
Alexander44
  • 188
  • 6
4

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.

Peter Elliott
  • 3,273
  • 16
  • 30
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

Steph
  • 635
  • 7
  • 22
  • ok, I've done this, and I've put them in my fonts folder, copied the css (edited it to look in font folder) and it seems to work perfectly in the example, yet on my actual page, i get "Failed to load resource" – GoodPie Feb 01 '13 at 02:23
0

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

Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171
-6

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

font-family: 'test';

This will surely work.

hma111
  • 1
  • 2