'Nextjs CORS issue for relative fonts import

When I compile my nextjs app to production and deploy it, I get CORS error when trying to load my fonts.

I do not have this problem when developing locally. I thought nextjs would automatically process my fonts through webpack and take care of all this.

Within my SCSS I load a relative font in both .eot and .woff2 format. In development (localhost:3000) this works just fine.

How I import my scss to the next js app _app.js

import "assets/scss/global.scss";

My SCSS loading the font (assets/scss/global.scss)

@font-face
{
    font-family: 'boxicons';
    font-weight: normal;
    font-style: normal;

    src: url('../../../../fonts/boxicons.eot');
    src: url('../../../../fonts/boxicons.eot') format('embedded-opentype'),
    url('../../../../fonts/boxicons.woff2') format('woff2'),
    url('../../../../fonts/boxicons.woff') format('woff'),
    url('../../../../fonts/boxicons.ttf') format('truetype'),
    url('../../../../fonts/boxicons.svg?#boxicons') format('svg');
}

Console Error In production

Access to font at 'webpack:///mini-css-extract-plugin/_next/static/media/boxicons.6761648c.woff2' from origin 'https://www.myapp.com' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Nextjs CORS issue for relative fonts import

Sources

Related Questions