Home > Web Front-end > CSS Tutorial > Why are my fonts not loading in Firefox when using @font-face with absolute URLs from an external domain?

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

Patricia Arquette
Release: 2024-11-07 00:15:02
Original
172 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template