face not working with Firefox, but working with Chrome and IE
The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I'm suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain imports.
But this is all just static HTML and there's no question of cross-domain.
On my landing-page.html I do a CSS import like so:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
Within the main.css I have another imports like so:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
and within the type.css I have the following declarations:
@font-face {
font-family: "DroidSerif Regular";
src: url("font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"),
url("font/droidserif-regular-webfont.woff") format("woff"),
url("font/droidserif-regular-webfont.ttf") format("truetype"),
url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
@font-face {
font-family: "DroidSerif Bold";
src: url("font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"),
url("font/droidserif-bold-webfont.woff") format("woff"),
url("font/droidserif-bold-webfont.ttf") format("truetype"),
url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }
I have a directory called "font" in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.
I'm stumped on this one. It works in Chrome and IE but not on Firefox . How is this possible? What am I missing?
LOCALLY RUNNING THE SITE ( file:/// )
Firefox comes with a very strict "file uri origin" ( file:/// ) policy by default: to have it to behave just as other browsers, go to about:config , filter by fileuri and toggle the following preference:
security.fileuri.strict_origin_policy
Set it to false and you should be able to load local font resources across different path levels.
PUBLISHED SITE
As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:
<FilesMatch ".(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.
A nice recap is available here
In addition to adding the following to your .htaccess: (thanks @Manuel)
<FilesMatch ".(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
You may want to try explicitly adding the webfont mime types to the .htaccess file... like this:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
In the end, my .htaccess file looks like this (for the section that enables webfonts to work in all browsers)
# BEGIN REQUIRED FOR WEBFONTS
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# END REQUIRED FOR WEBFONTS
I've had this problem too. I found the answer here: http://www.dynamicdrive.com/forums/showthread.php?t=63628
This is an example of the solution that works on firefox, you need to add this line to your font face css:
src: local(font name), url("font_name.ttf");
上一篇: 在Web浏览器上使用.otf字体