Custom font not loading in Chrome Based browsers due to CORS restriction

Hosting on Micro.blog
1

Hi!
I have uploaded and been using a custom font on my site and of recently the font is blocked in Chrome Based browsers due to said CORS policy, which I believe to be an cross-site restriction.

The font is stored in my /uploads/ and works fine everywhere else, but Chrome.

Any idea how this can be avoided? I guess it’s CDN thing.

I have tried to encode the font and copy that into the CSS, which would wokr, but the Micro.Blog CSS editor refuses to save that. :man_shrugging:

Does anyone have any idea other than not using any Chrome-based browser? Any help appreciated.

Cheers, Sven

2

Hi Sven, I could take a look at this, but I need a URL to the site where the error is present.

Cheers, Sven :wink:

3

Hi Sven! :grinning:

I kind of forgot that: https://svbck.org

4

It looks like the request for the font gets redirected to
https://cdn.uploads.micro.blog/26225/2023/shantellsansbnceinfmspacitalwght.woff2. Do you have Use content delivery network for images enabled? I know it says images, but maybe it applies to fonts as well. What do you say, @manton?

So, we would either have to get rid of that redirect somehow or change the CORS configuration for cdn.uploads.micro.blog to make Chrome happy.

A workaround could be to remove the font from your uploads and instead add it to a custom theme’s static directory. That should avoid the redirection.

5

Thanks Sven. I was thinking that the CDN could be the culprit here and have it already disabled and rebuilt the site, but for some reason the images also still seem to be delivered from the CDN. Not sure about that though. In either way it doesn’t seem to fix that.

  • A workaround could be to remove the font from your uploads and instead add it to a custom theme’s static directory. That should avoid the redirection.*

Interesting! Do you mean to clone the theme and then upload it there? How would I upload the font file there?

6

So, somehow fixed it.

At the moment it seems to work the following:

  • I Base64 encoded the font and copied that into a new css file, cleverly named font.css and uploaded that
  • then used an @importrule to import that css file in my custom css.

At the moment that seems to work. Don’t know if this is particular clever or not, but I call this 1:0 for me.

7

Yay! :slight_smile:

8

Ah, that’s interesting. I’m going to change Micro.blog to not redirect fonts to the CDN. There’s a lot of benefit to just serving photos, video, and audio, so we’ll limit it to that. (And you can always manually link to the CDN if you want for other resources.)

1 Like
9

What’s the procedure to manually link to the CDN?

10

Oh, good question! Maybe we need a “Copy Link for CDN” button? The CDN URLs are constructed in this format:

https://cdn.uploads.micro.blog/[site_id]/[path]

The site ID can be found in the URL on the web if you click on Posts. Let’s say mine is 123.

So if you want to link to a photo at:

https://yourblog.com/uploads/2023/hello.jpg

It becomes:

https://cdn.uploads.micro.blog/123/2023/hello.jpg

1 Like
11

So if I’m understanding correctly media that’s uploaded will automatically use the CDN, so long as you’ve enabled it. This would be if you wanted to link directly to it externally?

So in the case of a custom font, you’d have to manually upload and then link to it using your example above—using the result in a @font-face declaration, for example.