0

Possible Duplicate:
css @font-face not working with Firefox, but working with Chrome and IE

I have a little problem and can't seem to figure out what the solution is.

I'm using Museo as a webfont. In Safari everything works like a charm, but in Firefox it doesn't work. Does anyone have any clue why?

@font-face {font-family: 'MuseoSans-500'; src: url('webfonts/eot/style_159303.eot'); src: url('webfonts/eot/style_159303.eot?#iefix') format('embedded-opentype'), url('webfonts/woff/style_159303.woff') format('woff'), url('webfonts/ttf/style_159303.ttf') format('truetype'), url('webfonts/svg/style_159303.svg#MuseoSans-500') format('svg');} 

enter image description here

2
  • 2
    Did you already have a look at this? stackoverflow.com/questions/2856502/… Commented Aug 5, 2011 at 7:05
  • Hard to say anything useful without seeing your actual page. Is your CSS in an @media rule? Is the font file subtly broken so the OpenType sanitizer in Firefox rejects it? Commented Aug 5, 2011 at 18:30

2 Answers 2

2

I'm not sure what exactly is wrong with your @font-face setup, but I've gotten Museo working in FireFox using @font-face. I'd recommend generating the CSS declarations and different font files using Font Squirrel's @font-face generator which automatically sets everything up for all major browsers.

Sign up to request clarification or add additional context in comments.

Comments

1

If you can't get it working and the font doesn't have to be exactly the same, maybe you should have a look at the Google font API. Just choose a font from the list ('Ovo' or 'Forum' look quite similar to yours), import it in your website with

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> 

...and then use it as a regular font in your CSS:

body { font-family: 'Font Name', Verdana; } 

The best about it, besides that it's that easy: It even works with IE6.

Comments