If you use Polylang with two different domains, or have any other setting that is accessing one WordPress installation from different domains, you might face the problem that the icon font of DIVI is not loading and icons disappear respectively showing e.g. an uppercase “U” instead of the search symbol and multibyte placeholders instead of the social icons in the footer. You might also came across an error message saying something like:
Font from origin ‘http://domain.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://domain.com’ is therefore not allowed access. contentScript.js:234 cs: onRequestListener(Arguments[3])
Thanks to Eduard from the Elegant Themes support the solution is easy. Just add the following lines to the .htaccess in the root folder or your WordPress installation:
|
1 2 3 4 5 6 7 8 9 10 11 |
# ---------------------------------------------------------------------- # 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> |
Eduardo also had another directive in his solution, but it worked for me also without. In case you need it, place this code before:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# ---------------------------------------------------------------------- # 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> |
You can also read more about this solution here: http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin
As suggested there you should replace the wildcard * with your domain. I just publish this solution here to be easier found also outside of the closed ET forum, but I can not take any guarantee for security issues since I am not a server expert. If you are one and have something to share about it, please comment. If you are in doubt, don’t use it or inform yourself before!
Sweet,. Thanks!!
Hey Sofian, thanks for this post – it seemed the most direct to this prolem and had hope it would work :) – i am going mad trying to solve this. I tried adding this – the first and second bit of code in my root .htaccess. I even restart Apache but it still gives this error. I don’t quite understand it. Any idea why? Thanks in advance
Hey Yatish, unfortunately I am not very knowledgable in server things, I just shared this solution further. I hope you could figure it out meanwhile.
Thanks, Sofian. This worked for me, too. I had to insert both sets of code.
I have several Add-On domains under one main domain and use Divi on all of them. This was the first time I had this issue. I think it may be because this one, when I am working on it, still shows the main domain in the path. When the control panel is closed, and I’m logged out, only the “Add-On domain” shows as it’s intended to. Other devices only display the Add-On domain so I think it is something I need to adjust in the settings. So, the conflict may be that the site is seeing two domains only because the settings aren’t perfect. Just my guess.
I’ll have to chat with the good people at A Small Orange to see what needs to be done to get the main domain out of the working path.
Thanks to Eduardo, too, who you mention in this post!
All the best.
Thank you sooo much!
I had an issue after moving my site from subdirectory to root directory.
With your solution, everything is showing fine again.
You save my life ;)
I tried many things.
This worked:
I put and .htaccess in the “/wp-content/themes/Divi/core/admin/fonts” folder, with the following code:
Header set Access-Control-Allow-Origin “*”
And it worked!
Thank you for posting this. The solutions originally posted did not work for me but yours did!
Can you please dumb this down a bit? I am no techie but I can access and insert the right rules to htaccess
Super, solved my problem! Thank you very much for sharing ?
Thanks for this snippet and article. Solved my problem with an IDX redirect for a real estate client. Well done!
OMG thank you! How frustrating this was when I first launched!
Thank you! Worked for me.
Awesome help!! Thank you very much!
Thanks a lot! You really safed my day :)
Great! :)
It worked.
Wow, I’m so pleased to have found your solution. The first bit of code worked for me. I’ve been struggling with this for ages. Thank you!
You legend! This worked perfectly for me!
Worked for me too, thanks!
Thank you! Just pasted both (first one didn’t do the trick) on website and it worked. Appreciate your help.
Great!! Thank you, fonts stopped working after cache optimalization – this resolves it.
Thank You! Worked perfectly :-)
Glad to hear Lisa :)