So yesterday I decided to improve my site’s speed, I would start using a CDN (content delivery network). But as soon as I started using it, the social icons in the top menu bar and in the footer aren’t showing up. They look like little hollow squares and Chinese characters now. It happened the very moment I setup my CDN, but I assumed it was growing pains or something and would iron itself out by morning. Unfortunately, that’s not been the case.
Anyone know how I can fix this?
You can access my website here to see what I mean.
And I just noticed that the stars from Taqyeem plugin aren’t showing up. They’re appearing as boxes with Xs in them for some reason. I feel like maybe there’s something more I need to have the CDN cache, but I have no idea how to begin trying to figure that out.
You have to either setup a CORS rule for your CDN to load the “font” — or setup exception to load your fonts locally only. Fonts can’t load from another locale without a “cross origin” setup — this is to protect users from mischeif, so web browsers block this stuff. See your CDN docs on setting up CORS rule.
I’ve posted about this in the forum in past (obviously), as have TagDiv.
I don’t know if there is a “CDN DIY” tutorial anywhwere in here … but this is common issue EVERYBODY who sets up a CDN runs into eventually — in my case it was Jan/Feb 2014.
I tried posting the whole thing into .htaccess and my site stopped loading. I get “ERR_EMPTY_RESPONSE”…. and so I took out all the extra comments and it apparently loaded right before I made the change, so now it’s not loading again. I wonder if it just takes a few minutes for the changes to bounce around to all the servers or something.
In any case, I noticed when my page loaded, the social media icons were still not there.
I’ve been chatting with MaxCDN support. They’ve checked to make sure I’ve added the right code and advised me to purge my cache pull, I guess so that it would re-cache the new code or something, but it’s still not working. I was under the impression that the social icons were tiny image files or something, and not a webfont.
I guess I wouldn’t know for sure, that’s just what I would have assumed.
Everything is all well and good with this now. Between chatting with MaxCDN and chatting with Bluehost, we got it figured out.
However, I’m now using three CDNs (and my website is blazing fast), but I want to look into finding a way to allocate those more effectively with something like jsdelivr, or a similar platform. Anyone have any knowledge about this, suggestions, or know of any good step-by-step resources for making sure my CDNs are allocated as effectively as possible?
Hi
I suspect that the problem occur because the font required for the icons it’s blocked. This usually happens when the font is loaded from a different source or it’s served from http to https. Try this solution, from our reports it worked from most users: http://webmasters.stackexchange.com/questions/71630/font-blocked-from-loading-by-cross-origin-resource-sharing-policy-no-access-co
Thanks!
@andrei_luca, thanks for that resource, I should be able to do that without issue. However, it says there to put that code in the CDN’s .htaccess and not the primary one on my host’s server. How would I go about accessing .htaccess files on MaxCDN and CloudFlare?
Likely need to see the docs for your CDN.
In our case when we were using Amazon’s CDN in 2014 (not using CDN anymore as it didn’t help us, due to various factors), we had to do the CORS rule in both our site and ALSO on the CDN. I might have posted that in the Newspaper forum 2 years ago (yikes!). In our case with Amazon, we had to edit the ‘bucket’ to do it.
Probably for your CDN there is similar setup where you can enter time to live, expirations, and CORS info. They should have tutorial as CORS is super common problem.
e.g.,
https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/
That is exactly the code I added when I was chatting with the MaxCDN guy the other night, but we eventually got it working by doing something else. So now something really odd is happening: Everything is working fine when I’m on the desktop version of my site, but not only mobile version. When I pull my site up on my phone, there’s no menu icon to the left of the header, no search icon to the right of the header, and no social media icons in the footer. I can’t fathom why it would be working on the desktop version and not on the mobile as I would assume both the desktop and mobile are pulling the data from the same servers. And I’ve cleared/purged all my caches too.
This technology stuff is a pain is the rear sometimes a lot of the time.
Yah. I wasted the entire month of Jan. 2014 messing with CDN stuff before realizing that since we had dedicated server it only helped us with folks outside the US, which were not critical to our business anyway, and so dumped the CDN in favor of local hosting, with caching, mod_pagespeed, etc.
The CORS stuff is a pain. Additionally had to add stuff like “addtype” handlers to the htaccess as our system auto generates webp format images for Chrome and server didn’t know what that was (!). Augh.
Feel your pain. Sorry no better help from me — been awhile. So, not sure I’ve helped at all beyond moral support!
Looks like it’s fixed again, at least for now. Spent about 3 hours chatting with a MaxCDN guy and after getting nowhere with this dumb tech support rep at Bluehost, he helped me just make the files that were showing up exceptions to CDN caching and it’s working fine.
Sheesh.
