Hello,
I am using WP Super Cache plugin and wanted to integrate Amazon CDN. Everything worked fine, but the icons, star rating, search icon, and social media icons doesn’t show up.
After I went through all the documentations on this forum and other search engine, i Was not able to sort out.
Kindly help on the same.
Website: http://www.CinemaGlitz.com
Hi,
We use a font for most of the icons present in the theme. When the font is served from a CDN it may cause a Cross Origin issue. Try the solution presented here – http://screencast.com/t/pPtF7boVPyAQ – http://webmasters.stackexchange.com/questions/71630/font-blocked-from-loading-by-cross-origin-resource-sharing-policy-no-access-co
Thank you!
Thanks Emil,
I did try this. But doesn’t work. The website is hosted on Amazon AWS.
I found one .htaccess file on /opt/bitnami/apps/wordpress/htdocs. Do i have to use the code here? I did try but didn’t work.
Or do i have to put the code else where?
Kindly help. Thanks
Hi,
Yes, you can try to add that code in .htaccess file. But I have checked your site and did not found any issues – http://screencast.com/t/OsISmdAw Please clear cache and if you still have issues please provide a screenshot maybe I did not understand your issue.
Thanks!
Hello Alin,
I added the code in .htaccess file. – http://www.screencast.com/t/YZZPfJMklo
And cleared all caches and tried the same. And the results still the same. – http://www.screencast.com/t/sQT8l6Minq and http://www.screencast.com/t/tR1bQ7t4QGY
Kindly check and help. Thanks
Hi,
This is weird I have checked your site again and now I see the issue. This usually happens when loading the font file (which contains those icons) from another host/url – http://screencast.com/t/EwXi2meDB
Normally by adding this code in .htaccess file should solve this issue(clear cache and purge your files after that):
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>If this doesn’t work please try to regenerate the newspaper fonts then empty cache/purge files again and let me know if this issue persists.
You can try to regenerate fonts like this:
1. go to https://icomoon.io/app
2. button “import icons”, import from newsmag.svg (in /images/icons/),
3. select all icons;
4. button “generate font”, button “download”;
5. copy the 4 files (.eot, .svg .ttf .woff), in “fonts” folder in the downloaded zip file, rename icomoon.* to newsmag.*, replace old files, done.
Hope this helps!
Hi Alin,
I did try the step. And also in step 5. i renamed to newspaper.* since i am using newspaper theme. Cleared all cache but still the same.
Kindly check and help. Thanks
There is also a CORS setting you can add with Amazon CDN if memory serves.
http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
Hello Chris,
But i am not using Amazon S3 for the same.
Sorry thought you were using Amazon cloud for hosting the content. My mistake 🙂
I am using Amazon EC2 for hosting and Cloudfront for CDN.
Okay. When I was using Cloudfront I had to set CORS rules on the bucket, if memory serves. It’s been over a year since I messed with that, sorry.
If your buckets are not via S3 .. not sure how that works.
In our case :: The solution is to get CORS working with Amazon S3, then to get Cloudfront to forward the appropriate headers.
Old article if the docs did not help from Amazon….
http://www.holovaty.com/writing/cors-ie-cloudfront/
SORRY … I have not used Amazon hosting, so not sure how that works vs S3+cloudfront.
Hi,
I don’t know if you have managed to solve this, but I have checked your site again and now the icons appear fine on your site – http://screencast.com/t/EXPFoW3T75
When I have checked your site on 10 November (my reply #78104) it was also correct. So if you still have this issue please clear all the cache and purge your files.
Thanks!
Hey Alin,
I tried a lot, since it didn’t work I disabled the CDN option. That’s why you are seeing a normal website. Without the icons the website didn’t look good. So had to disable the CDN. Still looking for solution. Kindly check and help on the same.
Hi,
Unfortunately I cannot provide an accurate solution to this as we did not made any tests regarding this. The above solution helped many users to fix this issue, but if you say that didn’t work in your case, I can only suggest to find an online solution. I have searched regarding this and I paste bellow some topics that may help you:
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/
https://forums.aws.amazon.com/thread.jspa?messageID=404768
Thanks!
