Why Aren't My Fonts Loading in Firefox When Using @font-face with an External Domain?

CSS @font-face Absolute URL from External Domain: Troubleshooting Font Loading Issues in Firefox

Problem:

When using the @font-face rule with an absolute URL to load fonts from an external domain, the fonts fail to load in Firefox 13.0.1.

Analysis:

Firefox requires Access Control Headers to be set for fonts loaded from different domains. Specifically, the Access-Control-Allow-Origin header must be set to either * or the domains allowed to request the font.

Solution:

For Apache servers, add the following code to the .htaccess file:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

This will set the Access-Control-Allow-Origin header to *, allowing all domains to request the fonts.

Additional Considerations:

• If you are not using Apache, you will need to consult the documentation for your specific server software to find out how to set Access Control Headers.
• Fonts hosted on different subdomains also require Access Control Headers to be set correctly.
• Ensure that the fonts used in your CSS are actually hosted at the specified URL and have the correct permissions to be accessed by the web browser.

The above is the detailed content of Why Aren't My Fonts Loading in Firefox When Using @font-face with an External Domain?. For more information, please follow other related articles on the PHP Chinese website!