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": (

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 =;

  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
  additionalConfiguration: (generatedConfiguration) => {


    return generatedConfiguration;


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?