Fonts or icons not showing on my site!

Knowledge Base > General > Fonts or icons not showing on my site!

in General

Some browsers refuse to embed some fonts.
This problem can be seen in the browser console:

Font from origin 'http://cdn.example.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.

This should solve your problem, just copy paste it into your .htaccess file en re-upload it, clear your cache and eventually also clear your CDN files and the problem is solved:


# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
# mod_headers, y u no match by Content-Type?!
<FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS

# ———————————————————————-
# Webfont access
# ———————————————————————-
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like “subdomain.example.com”.

<FilesMatch “\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$”>
Header set Access-Control-Allow-Origin “*”

 

Please check the following links for more info:

0