Using custom fonts in spfx web parts

I have a custom web part that displays weather data and I’m using a custom icon font to go along with the data.

It works on the hosted workbench but when I package the solution and deploy it on my tenant, I get the following console errors:

Failed to decode downloaded font: <URL>
OTS parsing error: invalid sfntVersion: 1702391919

The font files are located at srcwebpartsmywebpartfont and the @font-face and other icon-related styles are in a CSS file srcwebpartsmywebpartstyle.

I added a copy-static-assets.json file with the following code:

{
    "includeExtensions": (
        "ttf",
        "woff",
        "eot",
        "woff2",
        "svg"
    )
}

My gulpfile was updated to look like this:

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - (sass) The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

// Font loader configuration for webfonts
const fontLoaderConfig = {
  test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
  use: ({
    loader: 'file-loader',
    options: {
      name: '(name).(ext)',
      outputPath: 'font/' 
    }
  })
};

// Merge custom loader to web pack configuration
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {

    generatedConfiguration.module.rules.push(fontLoaderConfig);

    return generatedConfiguration;
  }
});

build.initialize(require('gulp'));

And I’m referencing the icon CSS in my MyWebPart.ts file like this:

import './style/weather-icons.min.css';

In Chrome’s inspector, I can see it’s referencing the public SharePoint CDN:

sharepoint cdn reference

And when I click the link, it appears to load the font without issue:

font loading correctly

What am I doing wrong here?