Why Isn't My @font-face Working in Firefox?

CSS @font-face Not Working in Firefox: Resolving Cross-Domain and Local Hosting Issues

Firefox exhibits peculiarities in rendering custom fonts defined using the @font-face rule, particularly when the HTML and CSS files reside locally or on different domains.

Local Hosting (file:///)

Firefox enforces a strict origin policy for local file access (file:///). To resolve this:

• Navigate to about:config in Firefox's address bar.
• Filter by "fileuri" and toggle "security.fileuri.strict_origin_policy" to false.

This allows Firefox to access local font resources regardless of document path levels.

Published Site

If the problem persists on a published website, it's worth considering:

• Adding an Access-Control-Allow-Origin header to .ttf, .otf, and .eot files in the .htaccess file:

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

• Alternatively, base64 encode the font typeface (though not recommended for aesthetics).

Additional Information

For a comprehensive overview of this issue, refer to the following links:

• [CSS Cross-Origin Fonts in Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch#Cross-origin_font_loading)
• [Enable Cross-Domain Fonts in Firefox](https://stackoverflow.com/questions/19223013/enable-cross-domain-fonts-in-firefox)

The above is the detailed content of Why Isn't My @font-face Working in Firefox?. For more information, please follow other related articles on the PHP Chinese website!