0

I'm trying to embed a font using an @font-face kit created with Font Squirrel (jsfiddle here). While the embed seems to be working in Chrome, neither IE nor Firefox display the font. I've pored over the CSS for hours but can't seem to find what the problem is. Any input is greatly appreciated.

Marcatectura
  • 1,721
  • 5
  • 30
  • 49

2 Answers2

1

In firefox at least, the @font-face URL needs to be relative to the document root. In other words, importing fonts from an URL outside your site in Firefox will not work. The same may be true for IE but I'm not sure.

HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
  • More exactly, it would only work with suitable Access Control headers (that’s how Google fonts work), see http://stackoverflow.com/questions/11616306/css-font-face-absolute-url-from-external-domain-fonts-not-loading-in-firefox. So the solution is to put the fonts on the same server as the HTML document. – Jukka K. Korpela Sep 01 '12 at 06:05
  • After switching to relative URLs and the Fontspring @FF syntax, I've got the font nearly working in IE, FF and Chrome. Thanks j-man86! However, I'm still experiencing some problems with the font not displaying in Safari. – Marcatectura Sep 01 '12 at 15:43
-1

You can try this structure:

@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
       url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}

Taken from CSS3Please.

Krycke
  • 3,106
  • 1
  • 17
  • 21