Why Can't I Load Fonts From External Domains in Firefox?

CSS @font-face Absolute URL Font Loading Issues in Firefox

Background:

When using the CSS @font-face rule with an absolute URL to specify a font hosted on a different domain, you may encounter issues with font loading in Firefox. This can be frustrating, especially when you desire consistent styling across multiple sites.

Root Cause and Solution:

Firefox restricts the loading of fonts from external domains due to security concerns. To resolve this, the font host server must include Access Control Headers, specifically Access-Control-Allow-Origin set to '*' or specific allowed domains.

For Apache web servers, add the following code to your .htaccess file:

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

Once you restart the server, Firefox will be able to load the fonts from the external domain, resolving the loading issues.

The above is the detailed content of Why Can't I Load Fonts From External Domains in Firefox?. For more information, please follow other related articles on the PHP Chinese website!