CDN (CloudFront) and WebFonts

  • Resolved flashjunkie

    (@flashjunkie)


    5 years, 4 months ago

    Ok guys, hoping someone can help I’ve tried everything available online to no avail!

    I’m using Siteground to host my website, using W3TC alongside an Amazon Cloudfront CDN.

    All images, CSS, JS etc etc load perfectly from the CDN.

    Webfonts however… I’m getting the dreaded:

    “Access to font at ‘https://cdn.tpet.co.uk/wp-content/plugins/mobile-menu/includes/css/font/mobmenu.woff2?31192480’ from origin ‘https://tpet.co.uk’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

    Error for all my web fonts.

    What I have tried…

    – Setting a CORS policy on the S3 bucket
    – Adding the ‘origin’ header to the CDN distribution behaviour
    – Setting the CDN behaviour to ‘HTTPS’ only.
    – Various other tweaks on the CDN side of things.

    – Editing the .htaccess to – Header set Access-Control-Allow-Origin “*” – for all appropriate files.
    – I’ve tried many, many different .htaccess edits from around the web including targeting just the CORS env

    As a last ditch effort to at least use the CDN for JS, IMGS, HTML etc I’ve tried to STOP the CDN from getting the font files from the CDN but it seems that no matter what I try the font locations are always written into the minified CSS files as CDN links.

    Here are my CDN settings in W3TC – at the time of writing, webfonts are still being requested from the CDN and causing errors, even though the CSS is now being loaded locally…

    OFF - Only Purge Manually
OFF - Disable for SSL
OFF - Use CDN links for ML
ON - Add CORS header (have also tried switching this off, didnt work)
OFF - Disable for roles

WP-includes files to upload: *.css;*.js;*.gif;*.png;*.jpg;*.xml
Theme files: *.js;*.gif;*.png;*.jpg;*.ico;*.less
File types to import: (empty)

Custom File List:

favicon.ico
{wp_content_dir}/gallery/*
{wp_content_dir}/uploads/tpet-uploads/*
{wp_content_dir}/uploads/avatars/*
{plugins_dir}/wordpress-seo/css/xml-sitemap.xsl
{plugins_dir}/wp-minify/min*
{plugins_dir}/*.js
{plugins_dir}/*.gif
{plugins_dir}/*.jpg
{plugins_dir}/*.png

User agents (empty)

Rejected files:

{uploads_dir}/wpcf7_captcha/*
{uploads_dir}/imagerotator.swf
{plugins_dir}/wp-fb-autoconnect/facebook-platform/channel.html
{plugins_dir}/onesignal-free-web-push-notifications/sdk_files/manifest.json.php
{uploads_dir}/fbrfg/*
{plugins_dir}/*.css
{wp_content_dir}/cache/minify/*.css
{plugins_dir}/mobile-menu/includes/css/font/*
{plugins_dir}/*.ttf
{plugins_dir}/*.otf
{plugins_dir}/*.woff
{plugins_dir}/*.woff2

    I’ve tried lots of other tweaks too, I’ve spent days trying to solve this using various blogs (including amazons own help post on this subject) to no avail.

    Please can someone help?

    At this point i’d settle for the fonts just to be loaded locally, i’d prefer everything to come from the CDN but I just want a working website!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @flashjunkie

    I am sorry about the issue you are experiencing and I am happy to assist you with this.
    Have you tried adding to CORSConfiguration on AWS

    <AllowedOrigin>yourdomain.com</AllowedOrigin> or
    <AllowedOrigin>*</AllowedOrigin>
    Please let us know if this helps!

    Thread Starter flashjunkie

    (@flashjunkie)

    Hi Marko,

    Yes I have tried several different configs on AWS but nothing has worked, I clear the caches, clear the minify cache and purge the CDN but the problem remains.

    Many thanks,

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @flashjunkie

    Are you using pull or push CloudFront CDN? If you upload to s3 bucket – you need to set CORS policy there
    Please check the CORS documentation on AWS.
    I hope this helps!

    Thread Starter flashjunkie

    (@flashjunkie)

    We are using a PULL CDN. We do not have any content stored in the S3 bucket from what I can see.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @flashjunkie

    Thank you for the information. I’ve checked for headers on the origin and no CORS header is there.
    As you are on Nginx, you should add the following rules to your nginx.conf in your root:

    location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

    Please let us know if it helps!

    Thread Starter flashjunkie

    (@flashjunkie)

    Thanks for this, I am hosted on SiteGround Cloud plan and have no access to the Nginx config. I have been told by SG that Nginx is not used for this purpose and that I’m to use the Apache .htaccess file.

    I have added similar code to the htaccess file but it still does not work.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @flashjunkie

    In your environment, those files are handled by nginx while PHP by apache. i.e. apache rules don’t have a chance to act.
    Can you ask SG to add this rule to your config?

    Thread Starter flashjunkie

    (@flashjunkie)

    Hi Marko,

    Thanks for this, I’ve contacted SG many, many times asking them to do this however on this occasion they finally listened and indeed the site is working as expected, all fonts, css, js etc loading effortlessly from our AWS CDN.

    Many thanks.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @flashjunkie
    I am glad to know that your issue is resolved!
    Thank you for providing this info!

    Hello Marko,

    I am having the same issue and I can’t find a solution. I am running everything on AWS, website is Lightsail (Linux Bitnami Stack), using Cloudfront and S3 bucket.

    Everything was fine when it was a Windows EC2 instance but when I migrated to Lightsail CORS started avoiding fonts.

    You can see that at https://www.cloudcoaching.com.br

    Today I was about to remove WPTC and migrate to another plugin but I read all your support tickets and you are very kind and committed to help that made me decide not to migrate yet.

    Can you help me please? I am getting crazy! LOL

    Hope to hearing from you sooon.

    Thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CDN (CloudFront) and WebFonts’ is closed to new replies.