Search code examples
cssfont-face

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?

Solution

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