Why are my fonts not loading in Firefox when using @font-face with absolute URLs from an external domain?

Understanding Cross-Domain @font-face Limitations in Firefox

Question: Why are my fonts not loading in Firefox when using @font-face with absolute URLs from an external domain?

Problem Description:

The provided code snippet utilizes @font-face to define custom fonts hosted on "fwy.pagodabox.com" for use in a Shopify store. However, in Firefox 13.0.1, these fonts are not loading, leading to the question of whether this is an issue with Firefox's functionality or the syntax employed in the CSS.

Answer:

Firefox imposes a restriction on loading fonts from external domains via @font-face unless specific access control headers are in place. When hosting fonts on a different domain, it's crucial to configure the server to include the Access-Control-Allow-Origin header with a value of * (wildcard) or the specific domain from which the fonts are being requested. This allows the browser to access the fonts across domain boundaries.

For Apache servers, the following directives can be added to the .htaccess file to enable cross-domain font loading:

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>

By implementing these access control headers, the fonts hosted on the pagodabox server can be accessed by the Shopify store, and the fonts will correctly load in Firefox.

The above is the detailed content of Why are my fonts not loading in Firefox when using @font-face with absolute URLs from an external domain?. For more information, please follow other related articles on the PHP Chinese website!