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

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

Encountering issues with @font-face functionality in Firefox while it operates seamlessly in Chrome and IE can be perplexing. This article will delve into potential causes and solutions.

Locally Running the Site (file:///)

Firefox enforces a stringent policy for "file uri origin." To align its behavior with other browsers, modify the following preference in about:config:

• security.fileuri.strict_origin_policy

Switch its value to "false" to permit cross-path loading of local font resources.

Published Site

For published sites, consider adding an additional header in .htaccess to address potential cross-domain issues:

<FilesMatch ".(ttf|otf|eot)$"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Copy after login

Alternatively, you can explore the use of base64 encoding for font typefaces as a workaround.

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