I have this in my global css file, and the files are getting found, however I am getting this error which is causing the font not to display on my website:

@font-face {
  font-family: 'Founders Grotesk X-Condensed';
  src: url('fonts/FoundersGroteskXCondensed-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk X-Condensed';
  src: url('fonts/FoundersGroteskXCondensed-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk X-Condensed';
  src: url('fonts/FoundersGroteskXCondensed-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

localhost/:1 Access to font at 'webpack:///mini-css-extract-plugin//_next/static/media/FoundersGroteskXCondensed-Regular.96998844.woff' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, ipns, https, chrome-untrusted, ipfs, data, chrome-extension, chrome.
layout.css:1 
        
        
       GET webpack:///mini-css-extract-plugin//_next/static/media/FoundersGroteskXCondensed-Regular.96998844.woff net::ERR_FAILED