CORS error when trying to load custom font

Development

AI-generated summary

CORS Error with Custom Font

cjk77 is experiencing a CORS error when trying to load a custom font in a Discourse theme component. Despite adding the Cloudfront URL to the CORS setting, the error persists.

Troubleshooting Steps

  • Arkshine suggested checking if DISCOURSE_ENABLE_CORS is set in the app.yml file.
  • cjk77 confirmed with the hosting provider that DISCOURSE_ENABLE_CORS is set to TRUE, but the issue remains.
  • Johani suspects that the DISCOURSE_ENABLE_CORS setting is not the solution, as it allows requests from added domains to access the Discourse domain, not the other way around.
  • Johani suggests that the CDN might be blocking requests from the Discourse domain and recommends using a curl command to test the response headers.

Potential Solution

Johani believes that the CDN needs to be configured to allow requests from the Discourse domain, and the presence of Access-Control-Allow-Origin: * in the response headers would indicate a successful setup.

1

I’m trying to make use of a special font in one of my theme components. I’ve followed the instructions in this post:

Here’s the CSS in my component:

@font-face {
  font-family: 'northwood';
  font-style: regular;
  src: url($northwoodhigh) format('woff2');
}

.category-list tbody .category h3 a[href] {
	color: #ccc;
	font-family: 'northwood', cursive;
	font-size: 135%;
	word-spacing: 3px;
}

I’ve added my Cloudfront URL to the CORS setting like so:

Image 2020-04-25 at 6.45.23 PM
Image 2020-04-25 at 6.45.23 PM600×143 18.7 KB

But it doesn’t work – unfortunately, I get a “Cross-origin request blocked” error in the console when I load a page with that CSS:

7d26013f5bcde40cc8778378940e1e53_Image 2020-04-25 at 6.38.04 PM

(Sorry for the very smol image.) Does anyone have any advice? I’m stuck.

3

Do you have the DISCOURSE_ENABLE_CORS in your app.yml as suggests the description?

4

Not sure – is there a way to check? (I’m on a hosted instance of Discourse, so I can’t look at the config files directly.)

Edit: I emailed our hosting provider to see if that’s the problem.

5

Update: my hosting provider confirms that DISCOURSE_ENABLE_CORS is set to TRUE.

So, I’m still baffled.

7

I just tried this, just like you described, on a site with a CDN setup and it worked. So, I think this might be limited to your site.

I think the DISCOURSE_ENABLE_CORS setting is the inverse of what you want. Adding domains to that setting will allow requests from those domains access to your Discourse domain, not the other way around.

What you want is to allow requests from your Discourse domain to get access to the file on your CDN. I think your CDN is blocking those requests. You can confirm that by running something like this in a terminal window, after you change the values of course.

curl -H "origin: YOUR_SITE_URL" -v "PATH_TO_THE_FONT_ON_YOUR_CDN"

If everything is setup correctly, you should see something like this in the response headers

Access-Control-Allow-Origin: *