I'm attempting to use a @font-face declaration in my scss file.

The correct CSS rule is getting applied so the font-face declaration seems fine. The path is getting resolved as well so that's no issue. And, webpack throws no errors so it doesn't appear to be any kind of a loader issue. But in the end, the font is still not being rendered by the browser. (see image)

As of Webpack 5, the documentation states that you can declare in the rules "type: 'asset/resource'" to correctly load an asset such as a font or an image. It's working for the image I loaded, but not for the font.

CSS:

@font-face {

    font-family: 'Yusei Magic', sans-serif;

    font-style: normal;

    font-weight: 400;

    src: url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')

        format('truetype');

}

Webpack config:

module: {

...

        rules: [

            ...

            {

                test: /.ttf$/,

                type: 'asset/resource',

            },

        ],

    },