CSS @font-face not working with Firefox, but working with Chrome and IE

by

LOCALLY RUNNING THE SITE (file:///)

Firefox comes with a very strict “file uri origin” (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn’t, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

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

Frankly, I wouldn’t expect it to make any difference, but it’s so simple it’s worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

More Related Contents:

  1. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  2. Custom CSS Scrollbar for Firefox
  3. SVG data image not working as a background-image in a pseudo element
  4. Using custom fonts using CSS?
  5. Are eot, ttf, and svg still necessary in the font-face declaration?
  6. Remove extra button spacing/padding in Firefox
  7. Why is @font-face throwing a 404 error on woff files?
  8. Content url does not display image on firefox browser
  9. :not() selector not behaving the same between Safari and Chrome/Firefox
  10. @font-face anti-aliasing on windows and mac
  11. Custom Cursor Image CSS
  12. 3D CSS transform, jagged edges in Firefox
  13. firefox overflow-y not working with nested flexbox
  14. Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
  15. CSS @font-face – what does “src: local(‘☺’)” mean?
  16. Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream
  17. How to hide scrollbar in Firefox?
  18. How can I zoom an HTML element in Firefox and Opera?
  19. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  20. How do I Make Firefox Print a Background-Color Style?
  21. Faster way to develop and test print stylesheets (avoid print preview every time)?
  22. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  23. Non-Standard fonts in web?
  24. On IE CSS font-face works only when navigating through inner links
  25. What does @-moz-document url-prefix() do?
  26. CSS “outline” different behavior behavior on Webkit & Gecko
  27. Hide Up & Down Arrow Buttons (Spinner) in Input Number – Firefox 29
  28. Firefox blurs an image when scaled through external CSS or inline style.
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. Fix custom font line-height with CSS

Leave a Comment