CODEWITHSUNDEEP
htmlcssfont-face
Steven
Steven

Reputation: 19425

I'm not able to get font-face working

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?

Upvotes: 1

Views: 1145

Answers (3)

John Cavanagh
John Cavanagh

Reputation: 1

I know it sounds crazy, but I have had trouble getting @font-face working with absolute paths. However I use it all the time with relative paths and it works fine. And I also recommend Font Squirrel. All you need to do is adjust the CSS path relative to where your fonts are from their provided generated kits and code. And of course with Worpress, always use a Child Theme to circumvent default font declarations.

Upvotes: 0

Nick Beranek
Nick Beranek

Reputation: 2751

I'm going to recommend using a service like Font Squirrel. I say this because you can upload a font and it will automagically convert it to eot, ttf, etc, and provide you with a zip file containing your fonts and some sample files to get you started.

Upvotes: 0

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

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).

Upvotes: 2

Related Questions