How to Load Fonts Across Domains with @font-face in Firefox?

Cross-Domain Font Loading with @font-face

In an attempt to establish a central font repository for multiple websites, a developer encountered a peculiar issue: @font-face fonts were accessible only on the subdomain where the repository resided. Despite successful linking to font-face.css on other sites, the fonts failed to load.

Cause

This behavior stems from Firefox's security policy, which deems cross-domain font embedding harmful.

Solution

To overcome this restriction, add the following code to the top-level .htaccess file on the subdomain hosting the fonts:

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Access Restrictions

While the modified .htaccess allows all websites to access the fonts, the developer expressed a desire to restrict access to only authorized users. However, the W3C specification for Access-Control-Allow-Origin limits the options to a wildcard "*" or a specific domain.

The above is the detailed content of How to Load Fonts Across Domains with @font-face in Firefox?. For more information, please follow other related articles on the PHP Chinese website!