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

<h2>CSS @font-face Not Working in Firefox but Working in Chrome and IE</h2>
<p>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.</p>

<h3>Locally Running the Site (file:///)</h3>
<p>Firefox enforces a stringent policy for "file uri origin." To align its behavior with other browsers, modify the following preference in about:config:</p>

<ul>
<li>security.fileuri.strict_origin_policy</li>
</ul>

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

<h3>Published Site</h3>
<p>For published sites, consider adding an additional header in .htaccess to address potential cross-domain issues:</p>

<pre><FilesMatch ".(ttf|otf|eot)$">

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

</FilesMatch>
</pre>

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

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!