Импортировать шрифты в следующий. js проект реакции с веб-пакетом и стилизованными компонентами

Question

По какой-то причине со следующим. js Я просто не могу импортировать локальные шрифты в этот проект. Я делал это несколько раз раньше, но со следующим. js + react + webpack + стилизованные компоненты, похоже, шрифт хранится в _next папка, которая является правильной или неправильной.

next.config. js

require('dotenv').config();

const autoPrefixer = require('autoprefixer');
const hash = require('string-hash');
const path = require('path');
const transpileModules = require('next-transpile-modules');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const withPlugins = require('next-compose-plugins');

const runtimeConfig = {
    EXAMPLE_CONFIG: process.env.EXAMPLE_CONFIG || ''
};

const nextConfig = {
    distDir: 'build',
    publicRuntimeConfig: runtimeConfig,
    webpack: (config) => {
        // Next.js currently ignores "baseUrl" in tsconfig.json. This fixes it.
        if (config.resolve.plugins) {
            config.resolve.plugins.push(new TsconfigPathsPlugin);
        } else {
            config.resolve.plugins = [new TsconfigPathsPlugin];
        }

    // For inline SVGs.
    config.module.rules.push({
        test: /\.svg$/,
        use: ({
            issuer,
            resource
        }) => ({
            loader: '@svgr/webpack',
            options: {
                dimensions: false,
                svgo: true,
                svgoConfig: {
                    plugins: [{
                            cleanupListOfValues: true
                        },
                        {
                            cleanupNumericValues: true
                        },
                        {
                            removeDesc: true
                        },
                        {
                            removeEmptyAttrs: true
                        },
                        {
                            removeEmptyContainers: true
                        },
                        {
                            removeEmptyText: true
                        },
                        {
                            removeRasterImages: true
                        },
                        {
                            removeTitle: true
                        },
                        {
                            removeUselessDefs: true
                        },
                        {
                            removeUnusedNS: true
                        },
                        {
                            cleanupIDs: {
                                prefix: `${hash(issuer + resource)}`
                            }
                        }
                    ]
                }
            }
        })
    });

    // For loading file types.
    config.module.rules.push({
        test: /\.(eot|otf|woff|woff2|ttf|png|jpg|gif)$/,
        use: {
            loader: 'file-loader',
            options: {
                limit: 100000,
                name: '[name].[ext]',
            },
        },
    });

    return config;
}
};

// node_module packages that contain TypeScript that we want to compile.    
const withTm = transpileModules([
    'frontend-utilities'
]);

const withFonts = require('next-fonts');

module.exports = withPlugins([
    [withTm],
    [withFonts],
], nextConfig);

fonts.ts

import { css } from 'styled-components';
import CircularStdFont from '../public/static/fonts/CircularStdFont.otf';

export const GlobalFonts = css`
  @font-face {
    font-family: 'CircularStdFont';
    src: url(${CircularStdFont}) format('opentype');
    font-weight: normal;
    font-style: normal;
  }
`;

папка шрифтов

--- public
 -- fonts
  - CircularStdFont.otf

Ошибка

Есть идеи?

См. Снимок экрана ниже для ошибки получения 404.

См. Снимок экрана ниже с ошибкой получения 404.