Font-Awesome Not Properly Displaying on Firefox/How to Vend via Cdn

Font-awesome not properly displaying on Firefox / how to vend via CDN?

This solved the Firefox cross domain font issue for me (which causes the font to not load in Firefox). Just add the following to .htaccess or directly to apache config:

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

There is a webpage with instructions on how to set up CORS with different servers:
https://enable-cors.org/server.html

GWT Font-awesome not properly displaying on Firefox

If you're using Java, edit your appengine-web.xml file to include something like

<static-files>
  <include path="/my_static-files" >
    <http-header name="Access-Control-Allow-Origin" value="*" />
  </include>
</static-files>

Or to avoid potential security issues from using value=* as noted by @mabn.

<static-files>
  <include path="/my_static-files" >
    <http-header name="Access-Control-Allow-Origin" value="http://example.org" />
  </include>
</static-files>

If you're using Python, edit your app.yaml file to include something like

- url: /images
  static_dir: static/images
  http_headers:
    Access-Control-Allow-Origin: *

See Java app configuration of Python app configuration for more details and how to make it more specific to your configuration.

Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

Here is the working method to allow access from all domains for webfonts:

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

---

Related Topics