Why Can\'t I Embed Fonts From My Subdomain on Other Websites?

Cross-Domain Font Embedding: Why Only on the Same Domain?

You're trying to create a font repository for your websites, using @font-face declarations. You've set up folders for each font on a subdomain, created a font-face.css file with absolute links to the fonts, and confirmed that it's being loaded successfully. However, the fonts are not showing on your other sites.

The Issue:

Firefox restricts cross-domain font embedding, including subdomains. This is a security measure to prevent unauthorized access to fonts from other websites.

The Solution:

To enable cross-domain font embedding on your subdomain, add the following code snippet to the .htaccess file of that subdomain:

<filesmatch>
    <ifmodule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </ifmodule>
</filesmatch>

This code allows any website to access the fonts on your subdomain by setting the Access-Control-Allow-Origin header to "*".

Regarding Access Control:

While the W3C spec allows either a wildcard or a specific domain for Access-Control-Allow-Origin, it doesn't provide a clear mechanism for validating the Origin header. For now, the solution above should allow access from all websites.

The above is the detailed content of Why Can\'t I Embed Fonts From My Subdomain on Other Websites?. For more information, please follow other related articles on the PHP Chinese website!