Why Doesn't My @font-face Work in Firefox, But Works in Chrome and IE?

Why CSS @font-face Works in Chrome and IE but Not Firefox

The CSS @font-face rule allows you to add custom fonts to your website. However, in this case, the rule was working perfectly in Chrome and Internet Explorer but not in Firefox.

Local File System Issue

Firefox enforces a strict "file uri origin" (file:///) policy by default. If you are running your site locally using the file:/// protocol, Firefox will not allow cross-domain font access.

To resolve this issue, load your site using the http:// protocol or disable the following Firefox preference:

security.fileuri.strict_origin_policy

Published Site Cross-Domain Issue

If you are encountering this problem after deploying your site, it's possible that your browser is interpreting the relative font paths as cross-domain requests. To prevent this, add the following header to your .htaccess file:

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

This instructs the server to send an additional header with each font file request, allowing access from any domain.

Other Possible Solutions

If the above steps do not resolve the issue, consider using base64 encoding for your font typeface. While this is not the ideal solution, it may work as a last resort.

The above is the detailed content of Why Doesn't My @font-face Work in Firefox, But Works in Chrome and IE?. For more information, please follow other related articles on the PHP Chinese website!