Custom font's in src/assets/fonts headers Access-Control problems

Support
,
1

Hi,

So I am having a ton of trouble getting my custom fonts to work on either the preview domain or the temp domain I have setup:

https://5fc9ae8145423d000893d7c9–trusting-poitras-d0b5a3.netlify.app

console errors are viewable if you open up dev tools, it wouldn’t let me post them as it interpreted too many links.

same errors on the temp domain: new.cromon.co.uk

I have a netlify.toml file that contains this:
[[headers]]
for = “/"
[headers.values]
Access-Control-Allow-Origin = "”

have tried various combinations of /src/assets/fonts/, /assets/ etc etc

All these fonts are getting imported in my main.css file as normal eg:

  @font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/manrope-extrabold.woff2') format('woff2'),
    url('/assets/fonts/manrope-extrabold.woff') format('woff'),
    url('/assets/fonts/manrope-extrabold.otf') format('truetype');
    font-style: normal;
    font-weight: 800;
  }

I am super stuck with these errors.

I can provide the src code if needed, there is nothing but static stuff in there (no keys or anything)

thanks

Eugene

2

@cromon I see the errors, but the links on the page are to assets on Cloudfront. The links shown in your code segment above are to local assets. It seems that you either need to provision those assets on Cloudfront or move them to Netlify and change the links to point to them there.

1 Like
3

Yea I think I’ve nailed it now, after a lot of messing around with moving the fonts and changing various deploy and application settings!

Actually didn’t think this post went through as wasn’t showing up in my posts!

Thanks for taking a look though.

Eugene