# CORS error when trying to load custom font

**URL:** https://meta.discourse.org/t/cors-error-when-trying-to-load-custom-font/149302
**Category:** Development
**Created:** [April 25, 2020, 11:48pm UTC](https://meta.discourse.org/t/cors-error-when-trying-to-load-custom-font/149302 "2020-04-25T23:48:20Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [April 25, 2020, 11:48pm UTC](https://meta.discourse.org/t/cors-error-when-trying-to-load-custom-font/149302/1 "2020-04-25T23:48:20Z")

</div>

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

> [@Include assets (e.g. images, fonts) in themes and components](https://meta.discourse.org/t/include-images-and-fonts-in-themes-and-components/62459):
>
> Themes and theme components allow you to handle uploaded assets such as images and fonts. You can control what assets your theme accepts using the site setting: theme authorized extensions Including assets in themes and components For remote themes Remote themes include: Themes and components installed from the Popular list of themes Themes and components installed using the From a git repository method To upload assets to a remote theme or theme component, see [Create and share a font theme …](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462)

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](https://global.discourse-cdn.com/meta/original/3X/4/e/4e6c99e6f934136e0f79d76cc331b49e59a1d3bf.png)

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](https://global.discourse-cdn.com/meta/optimized/3X/3/7/37c29472a7427c0cb34358f272f6b1f9d2e8f66d_2_690x16.png)

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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 26, 2020, 10:17am UTC](https://meta.discourse.org/t/cors-error-when-trying-to-load-custom-font/149302/3 "2020-04-26T10:17:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [April 26, 2020, 11:30am UTC](https://meta.discourse.org/t/cors-error-when-trying-to-load-custom-font/149302/4 "2020-04-26T11:30:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [April 26, 2020, 3:33pm UTC](https://meta.discourse.org/t/cors-error-when-trying-to-load-custom-font/149302/5 "2020-04-26T15:33:11Z")

</div>

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

So, I’m still baffled.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [April 28, 2020, 1:51am UTC](https://meta.discourse.org/t/cors-error-when-trying-to-load-custom-font/149302/7 "2020-04-28T01:51:18Z")

</div>

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.

```bash
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

```plaintext
Access-Control-Allow-Origin: *

```
