Access to font at has been blocked by CORS policy.

[Maxet24]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

Vercel Current (sorry, didn't find)

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Vercel

Describe the Bug

Hello! I have two fonts that don't work on my site. In the google chrome console I get an error like this:

Access to font at 'webpack:///mini-css-extract-plugin/_next/static/media/Gardene-Stone.b0f685ba.ttf' from
origin 'https://somesite.club' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

If I run the site using `"npm run dev"`, everything works fine, but if I upload it to the hosting, the font stays standard and the JS console gives an error.

This is the css code that drives the font.

@font-face {
    font-family: 'GardeneStone';
    src: url('../fonts/GardeneStone.ttf') format('truetype'),
        url('../fonts/GardeneStone.woff') format('woff'); /* Modern Browsers */
    font-weight: 300;
    font-style: regular;
    font-display: swap;
}

    .GardeneStone {
    font-family: GardeneStone, sans-serif;
}

Expected Behavior

Two working fonts.

To Reproduce

GitHub Rep

[balazsorban44]

Your repository is private.

[Maxet24]

Your repository is private.

@balazsorban44
Oh, sorry, i changed.

[Maxet24]

Your repository is private.

So what do you think?

[mattcarlotta]

@Maxet24 Remove relative imports to public and instead request public assets via the base URL / which utilizes public static file serving.

Working repo: https://github.com/mattcarlotta/crazy-suit-cases-fork
Working demo: https://crazy-suit-cases-fork.vercel.app/

Changes made:
pages/_document.js (optional -> preload fonts to reduce FOUC)
pages/index.js (invalid nesting -> p cannot be a descendant of p)
styles/global.css (request assets from public by utilizing the base URL /)

On that note, if you're trying to utilize assets across different domains, then this can be considered anti-pattern. Instead, you'll want to use a CDN. There are ways around it, like adding CORS to a Next project, but ideally this should be avoided.

[Maxet24]

Thanks a lot! You even created a separate repository for me. This is the best tech support ever!

[aashnamehta810]

I have tried accessing it from public by utilizing the base URL /. I am still having CORS error

[ghuachins]

Hi guys, I am having the same scenario, in which my fonts are in our design system, consume as a node module.

Error:
Access to font at 'webpack:///mini-css-extract-plugin/<app_name>/_next/static/media/Lato-Regular.eced59bb.ttf' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

This webpack configuration in nextjs.config,js resolved the error for me:

webpack: (
    config,
    { isServer }
  ) => {
    config.module.generator.asset.publicPath = "/_next/";

    return config
  },

[DplAzim]

I am facing the same issue

uploaded the build file to the S3 bucket all the CSS, JS and images worked fine but the font is getting this error

import { Nunito } from "next/font/google";

//font config
const nunito_init = Nunito({
subsets: ["latin"],
variable: "--font-nunito",
weight: ["200", "300", "400", "500", "600", "700", "800", "900", "1000"],
display: "swap",
});

export const nunito = nunito_init.variable;