CORS errors with custom loaded fonts (Elementor) when using Live Link

[pfig]

Greetings,

I have a custom font loaded through Elementor’s custom fonts feature. When I create a Live Link to the website, I get a CORS error for the loaded fonts: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have tried adding Header set Access-Control-Allow-Origin "*" to the .htaccess file and Apache .conf files, but nothing is working.

Any advice or assistance is greatly appreciated.

[Nick-B]

Hi @pfig

Please see my previous comment below. That link might help give you some other ideas.

Cross-origine Issue on chrome and Firefox

Hi @Ben1 CORS errors aren’t really a Local specific issue but one that can definitely pop up from time to time when developing. There are a lot of resources out there about this, but for starters, this one might help you with some troubleshooting: What Is a CORS Error and How to Fix It (3 Ways) - Bannerbear

Otherwise, if you’re not able to resolve this using Live Link, you could try pushing the site up to a Demo to see if you can fix it there. Flywheel Demo Site

[pfig]

Hi @Nick-B - thanks for the reply and resources. I figured out that I had to wrap Header set Access-Control-Allow-Origin * inside of IfModule tags:
<IfModule mod_headers.c>Header set Access-Control-Allow-Origin *</IfModule>

and then include the headers module by adding LoadModule headers_module "{{ modules }}/mod_headers.so" to the modules.conf file located inside my site apache folder. Everything displays properly now.