Why Can\'t I Use @font-face Fonts from a Subdomain in Firefox?

Cross-Domain @font-face Blocking

In an attempt to establish a font repository, you've encountered an issue where @font-face declarations in a subdomain are accessible only within that subdomain. Firebug confirms the successful loading of the font-face.css file, leaving you puzzled about the font loading failure on other sites.

Firefox's Cross-Domain Restriction

The root cause lies in Firefox's security measure. It prevents the embedding of fonts across domains, including subdomains. This measure aims to safeguard against potential malicious activities.

htaccess File Modification

To overcome this restriction in Firefox, modify the subdomain's top-level .htaccess file by adding the following code:

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

This code adds a header to the response that permits cross-origin font loading.

Restricting Access

While you initially sought to grant yourself exclusive access to the font repository, the W3C spec for Access-Control-Allow-Origin only allows a wildcard "*" or a specific domain. Further research is required to determine if there are options for implementing more granular control over access.

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