Why Can't I Load @font-face Fonts from an External Domain in Firefox?

@font-face Absolute URL from External Domain: Troubleshooting Issues in Firefox

Incorporating external fonts into your website using the @font-face rule is essential for ensuring consistent typography and branding. However, when hosting your fonts on an external domain and attempting to load them in Firefox, you may encounter the frustrating issue of fonts not rendering properly.

This problem stems from the fact that Firefox enforces a same-origin policy on @font-face requests. When attempting to load fonts from a different domain, the browser triggers an error unless the font files are provided with Access Control Headers.

Resolving the Issue in Apache

To resolve this issue and allow cross-origin font loading in Firefox, you need to configure your web server to send the appropriate headers. For Apache servers, add the following code to your .htaccess file and restart the server:

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>

This configuration will add the necessary Access-Control-Allow-Origin header with a value of "*", allowing Firefox to load the fonts from the specified external domain.

With these headers in place, Firefox will now be able to access and render the fonts as intended, ensuring a seamless and consistent typographic experience across your web pages.

The above is the detailed content of Why Can't I Load @font-face Fonts from an External Domain in Firefox?. For more information, please follow other related articles on the PHP Chinese website!