CODEWITHSUNDEEP
cssfont-face
ctide
ctide

Reputation: 5257

Chrome and Firefox won't render my @font-face, safari will

I'm having a problem getting font-face to work correctly. I'm defining it as such:

@font-face {
  font-family: "creampuff";
  src: local("☺"), url(/fonts/CREAMPUF.TTF) format('truetype');
}

This works completely fine if this font is installed on the machine (I have 3 machines here, one has the font installed and it works, the other two do not, and it renders a different font.) It only renders incorrectly in Firefox and Chrome, Safari is able to render it just fine:

Safari's Render

Both Chome and Firefox render it like this:

Firefox / Chrome Rendering

However, if I disable the style in Chrome's web inspector (defined as: 'font-family: creampuff;') it definitely has an effect, changing the font to:

chrome / Firefox font-family disabled

I can't really even figure out where to start debugging. I've checked the network tab in Chrome, and it definitely loads the font successfully. Opening the font file shows everything correct, and on my other machine where I have the font installed locally, it functions correctly across all browsers.

Any idea how to go about resolving this?

Upvotes: 2

Views: 4474

Answers (2)

Kat Mitchell
Kat Mitchell

Reputation: 1

Didn't work for me either but what finally did work was changing the name of the font-family from the long name to the short name: from "Swiss 721 Black Extended BT" to "Swis721 BlkEx BT".

Upvotes: -1

phixr
phixr

Reputation: 486

Perhaps try to add font-style: normal to the css:

@font-face {
  font-family: "creampuff";
  src: local("☺"), url(/fonts/CREAMPUF.TTF) format('truetype');
  font-style: normal;
}

If that doesn't work you can alway try to convert the font into other formats. FontSquirrel has a handy tool to do this: http://www.fontsquirrel.com/fontface/generator. It will even generate the css for you if you want.

Upvotes: 4

Related Questions