@ font-face不会在Wordpress网站上的Firefox（5.01）中加载

Question

I have a problem with a Wordpress site. The @font-face is working in Safari and Chrome but not in Firefox 5.01. I've used Fontsquirrel's font generator (http://www.fontsquirrel.com/fontface/generator) which generates ttf, woff, eot and svg fonts.

The problem seem to be related to the Wordpress site. I've tested a plain html site with the same font and then Firefox is loading and displaying the font.

I've read that the problem can be related to CMD. I've also heard that Firefox, for security reasons only load fonts if you hard code the exact URL (http://www.koodoz.com.au/klog/font-face-woe-with-wordpress-firefox/) and not the php link in Wordpress.

The php wordpress site, notworking: link. The html site, working: link

The font won't load in Firefox. Any idea?

Answer 1

From the Firefox error console:

Warning: @font-face rule not allowed within @media or @-moz-document rule.
Source File: http://ellenz.se/wp-content/themes/BLANK-Theme/style.css?1312303802
Line: 18

And indeed, the CSS grammar does not allow nesting @-rules, though there has been talk of possibly relaxing that restriction. WebKit is just violating the spec here.

Answer 2

FF's Firebug dom inspector shows that your "notworking" page's body style is being overridden by line 26 of your reset.css. It would appear FF is treating the @import url as applying AFTER the rest of your style.css file.

Answer 3

Maybe you should have a look at the Google's font API . It's pretty easy to use and even works with IE6.

Just choose a font from the Google Font Directory , and then you only need to import it in your HTML-head-section (before the css):

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

After that, you can use it in your css as a ragular font:

body {
  font-family: 'Font Name', serif;
  font-size: 48px;
}