Hi,
After I have installed ssl on my server I cannot see the icons on my website whenever I make https request. Could you please help me solve this issue? Here is a screenshot from htechnews.com https://cloudup.com/cjJvOLsY6GY
I have tried in every browser (Edge, IE, Firefox, Chrome, Safari and Opera) but the results are the same.
Thanks in advance,
Vladimir
Hi
This usually happens when you try to load the fonts for the icons from http and your site goes trough https. In this case appear an conflict and the resource from the requested url it’s blocked. I found here a solution which may help you to solve this issue: http://webmasters.stackexchange.com/questions/71630/font-blocked-from-loading-by-cross-origin-resource-sharing-policy-no-access-co Also I’ve checked your site and noticed that you have lots of 502 errors in browser’s console which affect the site functionality: http://screencast.com/t/0wKfY6ChrDB I found here some information which may be helpful for you: https://technet.microsoft.com/en-us/library/bb794799.aspx – http://www.checkupdown.com/status/E502.html
Hope this help.
Thanks!
Hi Andrei,
Eventually the problem was with the CDN service and it is easy solvable. So for the future reference, if someone else has the same issue, following are the lines that should be added to the .htaccess file:
# ———————————————————————-
# 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
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
# 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
</FilesMatch>
</IfModule>
</IfModule>
# ———————————————————————-
# Webfont access
# ———————————————————————-
# 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|woff2|font.css|css|js)$”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
</IfModule>
and here is the link to the complete article https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/
Have a good one,
Vladimir
btw, one thing I found helped a lot in moving from http to https for other gremlins, was adding the explicit site URL info to your wp-config.php file. Won’t help with CORS/fonts stuff, but some other oddities.
Glad you could manage to solve this issue and thanks for sharing your solution here.
Thanks @Chris for your tip! Any advice which helps the users is welcome!
Thanks!
