Varnish Font Display Issue

Hello. When I enable the CDN in the Breeze plugin on a WordPress site with the Divi them, the font ETmodules won’t display. Is there a way to exclude fonts from the CDN?

Hello @tonya,

Which CDN service are you using?

Regards,
Ibad Rehman

The cloudways built in solution.

1 Like

you can exclude complete path of fonts by selecting Exclude Files option in Advanced Tab settings.

1 Like

Hey Tonya,

Before: Please take backup first.

If web font is not rendering after using CDN, use below code to enable Cross-origin resource sharing policy.

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

After: Now, Purge Varnish cache

This should fix. Still facing this problem? Consider sharing web page URL where you are facing this problem. I will check its console log and update what to do.

Thanks & Regards,
Gulshan

1 Like

That doesn’t work in my case.

The CDN (CloudWays’ StackPath) is reporting back (via console) that “https://myappscdnurl.stackpathdns.com/wp-content/plugins/elementor/assets/lib/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0’ from origin ‘https://myappsurl.com’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed.”

Checking my htaccess file, the module block you have is already there (with a single *, not as reported in the error with two). Likewise,I have excluded the paths to anything web font related and still get the error, so have had to turn off the CDN for now.

From my understanding, the only fix for this is to “disable CORS Header Support” in the StackPath settings. Obviously, we can’t do that as users. Would support be able to do that if requested?

If not we will probably unsubscribe from CloudWays’ implementation of StackPath and just set up our own account. Will probably be cheaper as well, so may do it anyway.

1 Like

This will not work and is a security problem. Do not do this.

There is (probably) no reason your htaccess should contain the Access-Control-Allow-Origin header at all, and definitely no reason it should contain the *. This is a security vulnerability. You have either been hacked, or a very sloppy developer put it there.

Okay, here is the improved version

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Haven’t been hacked. And I am not sure I a would call W3 Total Cache a sloppy developer (which is where the header originates from).