Webpack loading font icons but not font itself

I have a flask-react project that I'm developing. The react frontend on my previous framework was fine, font loading and all. Unfortunately, a core error made it so that it could not communicate with the flask back-end. I've designed/retooled a webpack framework to load an html file that calls a bundle.js with is then called. This is an image of almost everything working, except for the fonts.

Interestingly, the icons in the font still load properly. Obfuscating the font files in my webpack.config.js leads to them being shown as empty unicode boxes. This may indicate that this is an error in my CSS, that somehow the Arial font is overwriting my imported Nucleo Outline fonts, but the same css worked in the previous framework.

This is my webpack.config.js:

const webpack = require('webpack');
const resolve = require('path').resolve;
const config = {
     mode: process.env.NODE_ENV,
     devtool: 'eval-source-map',
     entry: __dirname + '/src/index.jsx',
     output: {
               path: resolve('../public/bundle/'),
               filename: 'bundle.js',
               publicPath: resolve('../public/bundle/')
     },
     resolve: {
               extensions: ['.js','.jsx','.css','.scss','.png','.jpg','.jpeg','.gif'],
     },
     module: {
           rules: [
                        {
                        test: /\.jsx?/,
                        loader: 'babel-loader',
                        exclude: /node_modules/,
                        query: {
                                presets: ['@babel/react','@babel/env']
                          }
                            },
                            {
                                test: /\.css$/i,
                                use: [
                                    // Creates `style` nodes from JS strings
                                    'style-loader',
                                    // Translates CSS into CommonJS
                                    'css-loader'
                                ],
                            },
                            {
                                test: /\.scss$/i,
                                use: [
                                    // Creates `style` nodes from JS strings
                                    'style-loader',
                                    // Translates CSS into CommonJS
                                    'css-loader',
                                    // Compiles Sass to CSS
                                    'sass-loader',
                                ],
                            },
                            {
                                test: /\.(png|jpe?g|gif)$/i,
                        loader: 'url-loader',
                                options: {
                      esModule: false,
                    },
                            },
                            {
                                test: /\.(ttf|woff|woff2|eot|otf)$/i,
                        loader: 'url-loader',
                            },
                ],
        },
        devServer: {
            historyApiFallback: true,
      }
};


module.exports = config;

This is my file structure.

Also, neither flask nor JS console pull any errors whatsoever.

This is a more in-depth structure of the assets file, including fonts.

I have no idea why this is happening. Any help would be appreciated, and I can add any information. I've tried basically everything. file-loader doesn't work (flask has trouble pulling the assets, and can no longer find icons). ttf-loader also doesn't work for the same reason.