When minified CSS and JS files are hosted on CloudFront it breaks icons

  • LukeSeven

    (@lukeseven)


    7 years, 11 months ago

    Hi guys,

    I’ve been using MAXCDN before switching to CloudFront and I experienced kinda the same issue but I cannot figure out why it breaks my icons as soon as I host minified CSS and JS files on Cloudfront. No matter if I have anything minified or not… as soon as I tick the box of “Host minified CSS and JS files” all my icons get replaced with some funny shapes.

    I have most of my css and js files minified and working fine when not on CloudFront. Besides those minified files and external media library attachments, I am hosting everything else over http and https and it’s working as intended but I need someone to help me to figure this out soon.

    This is what I get if I tick the “Host minified CSS and JS files” box.

    (index):1 Font from origin ‘http://image-files.marketonchart.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://marketonchart.com’ is therefore not allowed access.

    I’ve read about CORS and how to tweak it in AWS S3 bucket but I am not using any buckets but only CloudFront.

    Any kind of suggestion will be much appreciated.

    Thank you

    https://wordpress.org/plugins/w3-total-cache/

  • The topic ‘When minified CSS and JS files are hosted on CloudFront it breaks icons’ is closed to new replies.