问题描述:

I have a font-face set that I've made using the font-squirrel generator. Locally on my PC the fonts work fine in all browsers (basically I mean opening up the .html file in a browser and not going through a web server).

However when I put the exact same code on my local web server the fonts don't appear in Firefox or IE9.

Using Fiddler I have seen that the fonts are being downloaded correctly and cannot see any cross-domain calls so can't figure out why the font isn't being applied to the style. Anyway here's my code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="description" content="">

<meta name="keywords" content="">

<title>Font Test</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

<style type="text/css">

body {

font-family: 'AllerRegular';

}

</style>

</head>

<body>

<p>This text should appear as Aller.</p>

</body>

</html>

CSS

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 20, 2012 */

@font-face {

font-family: 'AllerRegular';

src: url('aller_rg-webfont.eot');

src: url('aller_rg-webfont.eot?#iefix') format('embedded-opentype'),

url('aller_rg-webfont.woff') format('woff'),

url('aller_rg-webfont.ttf') format('truetype'),

url('aller_rg-webfont.svg#AllerRegular') format('svg');

font-weight: normal;

font-style: normal;

}

Apache access and MIME type settings:

# allow access from all domains for webfonts

<FilesMatch ".(ttf|otf|eot|woff|font.css)$">

<IfModule mod_headers.c>

Header set Access-Control-Allow-Origin "*"

</IfModule>

</FilesMatch>

# webfonts

AddType application/vnd.ms-fontobject eot

AddType font/truetype ttf

AddType font/opentype otf

AddType font/opentype woff

If anyone has any other suggestions as to what I could try it would be greatly appreciated.

相关阅读:
Top