CSS @font-face absolute URL from external domain: fonts not loading in firefox

by

You can’t use @font-face in Firefox with a font hosted on a different domain
If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to ‘*’ or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain. If you are using Apache you can try to put this in your .htaccess 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>

More Related Contents:

  1. Using custom fonts using CSS?
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. CSS @font-face not working with Firefox, but working with Chrome and IE
  4. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  5. Why is @font-face throwing a 404 error on woff files?
  6. Wait for fonts to load before rendering web page
  7. Why should we include ttf, eot, woff, svg,… in a font-face
  8. @font-face EOT not loading over HTTPS
  9. @font-face anti-aliasing on windows and mac
  10. @font-face works in IE8 but not IE9
  11. @font-face src: local – How to use the local font if the user already has it?
  12. CSS @font-face – what does “src: local(‘☺’)” mean?
  13. Multiple font-weights, one @font-face query
  14. Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream
  15. Fallback fonts on special characters
  16. CSS @font-face not working in IE8
  17. font-face with wrong MIME type in Chrome
  18. Internet Explorer @font-face is failing
  19. Non-Standard fonts in web?
  20. On IE CSS font-face works only when navigating through inner links
  21. Using @font-face with Rails 3.1 app?
  22. Downloadable font on firefox: bad URI or cross-site access not allowed
  23. Fix custom font line-height with CSS
  24. Specify width in *characters*
  25. Can I replace the expand icon (▶) of the element?
  26. Styling browser-native video controls
  27. Background color of tspan element
  28. :empty selector for parent element
  29. How to Make Select Element be Transparent in Chrome?
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment