How to Set Up AWS Cloudfront Cache for External Font Request?

I'm getting this console log error when loading a font from a remote server:

Access to font at 'https://cdn.userway.org/widgetapp/bundles/udf/UserwayDyslexiaFont-Bold-Italic.woff' from origin 'https://www.myWebSite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've updated my web app to permit this font server. Now I need to get my CDN, AWS Cloudfront, to permit it.

The AWS docs have an article about this - How do I resolve the "No 'Access-Control-Allow-Origin' header is present on the requested resource" error from CloudFront?:

Under Cache key contents, for Headers, select Whitelist. From the list of headers, select one of the headers required by your origin. Then, choose Add header. Repeat this step for all the headers required by your origin.

Here's what the list of headers looks like:

And here's what I know about the headers for this resource from Chrome dev tools.

What do I need to select from the List of Headers so that my site can load this font?

UPDATE

Hmmm.... if I'm reading this correctly:

https://web.dev/cross-origin-resource-sharing/

...the error message I'm getting is coming from the server providing the font, and has nothing to do with any setup on my server or CDN.

Is that correct?

https://stackoverflow.com/questions/67350268/how-to-set-up-aws-cloudfront-cache-for-external-font-request May 02, 2021 at 03:45AM