CSS: @font-face giving 404 errors on font files

I recently finished a Genesis (v1.5) child theme for WordPress (v3.1), uploaded it to my site and the fonts aren’t appearing as they should. I used Font Squirrel to make the appropriate files and CSS for the font. I have permission from the font designer to use it for web embedding. This same code works great on my test site.

I used Firebug (v1.6.2) in Firefox (on OS X, v3.6.15) and found that the font files were getting 404 errors. I’ve triple checked the files and they are where they should be. I’ve uploaded them again and again and still get 404 errors on the font files. The fonts do not work in Chrome (on OS X, v10.0.648.133), Internet Explorer (on Win XP SP3, v8.0.6001.18702), or Firefox (on Win XP SP3, v3.6.15).

Read More

I tried turning off plugin one-by-one, but that didn’t make any difference, so I know it’s not a plugin conflict. I’m looking at the font files on the server, so I know they are there. Any ideas what to try next?

NOTE: I changed the CSS for the title font size on the production site since it jacked up the layout without the correct font. Otherwise, the code is identical to the test site. Note the “Remove these once font-face works” section at the top of the CSS file.

Related posts

Leave a Reply

3 comments

  1. I too was getting 404 errors with my face-face files in WordPress. The files were there but I was getting a 404 inside WordPress.

    I moved my font directory out of WordPress and put it into the root of the domain and changed my CSS accordingly.

    All OK now.

  2. In production site you have your fonts in fonts/ directory, while in the test case only “GuildofProfessionalActorsRegu” links to fonts/ and if you change the font family on #title a with firebug you’ll see a your custom font. Try fixing the first rule.