Webpack 5 font asset issue, no error but no font either

Issue

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',
            },
        ],
    },

Solution

When you're defining a @font-face declaration, on the font-family property, you must only write a string indicating how you will reference the font in your later styles.

In other words, I erroneously included "sans-serif" after "Yusei Magic" on the font-family property. This didn't throw an error, but it's incorrect CSS and thus was the source of my error. Thanks for anyone who chimed in!

Answered By - gittenger