Why Can't I Load Fonts from an External Domain in Firefox Using @font-face?

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

In an attempt to develop a store section on Shopify, a user encountered a problem when fonts hosted on a separate Pagodabox server failed to load in Firefox version 13.0.1. Their CSS used absolute URLs to reference the fonts, and they sought help to determine the source of the issue.

Firefox enforces security measures that restrict the loading of fonts from external domains using @font-face. When the font source is located on a different server, it must be accompanied by Access Control Headers, specifically the Access-Control-Allow-Origin header set to either '*' or the authorized domains.

To address this issue, the solution involves adding Apache configurations to the .htaccess file and restarting the server. Here's an example:

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>

By adding the specified configurations to the .htaccess file, Firefox will recognize the Access Control Headers and allow the fonts hosted on the external Pagodabox domain to be loaded successfully.

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