Question

I’m not able to get font-face working (That’s why I usually use Google fonts). But a customer has their own font that I must use.

I’m testing and comparing against this site (Main menu)

Here is my fiddle

Why am I not able to get this work? The font on the other website is working just fine.

Here’s my CSS:

@font-face{
  font-family:'testFont';
  src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.eot');
  src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.ttf'), format('truetype');
}

ul li a {
font-family:'testFont', sans-serif;
  font-weight:normal;
}

I’ve also tested on my local server. Not working there either.
I have previously tested using font-face on downloaded fonts from Google. No success.

What am I doing wrong?

Answer 1

I’ve had issues with font-face before, as well. I know that when I have used it I did not surround the font-family attribute with quotes (single or double). Also, for some reason there seems to have been some sort of conflict with putting the font-face rules in the main style sheet so I put them in a separate style sheet and put this at the top of my main stylesheet:

@import url('font.css');

Here is a quick example of one of my instances of this rule, copied directly from the file:

@font-face{
  font-family: Kalinga;
  src:url(kalinga.ttf);
}

@font-face{
  font-family: Kalinga;
  font-weight: bold;
  src: url(kalingab.ttf);
}

I know that I did not add both the ttf and the eot here, but it’s a good example for you to refer to. I would recommend starting with either eot or ttf and getting one working and then adding the other when you’re done (less changes to make when tinkering).