Webpack won't render custom fonts

Question

i am working on a small project using webpack.

I am trying to load custom font. I strictly followed the official tutorial here my fonts are inside my src folder.

Here is my webpack config file :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports= {
    mode: 'development',
    entry: {
        index: './src/main.js',
        elements: './src/elements.js'
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',

            },
        ],
    },

    devServer: {
        contentBase: './dist',
    },

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean:true,
    },

};

and here is my css file face font:

@font-face {
    font-family: 'Sarpanch';
    src: url('./Sarpanch-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}
@font-face {
    font-family: 'pfunked';
    src: url('./PFUNKED.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}
@font-face {
    font-family: 'Rudelskopf';
    src: url('./Rudelskopf Deutsch.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}
@font-face {
    font-family: 'wearealien';
    src: url('./wearealien.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}

and, for example, a h1

#header h1 {
    font-family: 'wearealien';

}

When i load the page, the font doesn't render. If I inspect with the devtool, the font-family: 'werealienn'is not crossed, it seems active but nothing happens if i untick the box. Also, it seems like webpack actually found and bottled the fonts, since the url is now something like

http://localhost:8080/8ac2a6173dd38f2383fd.ttf

if i enter the url manually, the font downloads

I don't get any error in the console, it appears everything is working, but the font does not render. I'm out of ideas

Apparently it only works with Javascript files, I'm not sure if you are not using the correct loader. — Raxel21, Aug 01 '21 at 22:18
but i am following their tutorial, unless i'm missing something it should work no ? — altho, Aug 01 '21 at 22:27
[Don't use ttf or otf as webfont, use woff2](https://stackoverflow.com/a/36110385/740553) (and then also _only if legal_ of course, because just because _you_ have a ttf/otf doesn't mean it's legal for you to use it online =) And if your CSS uses plain links: don't make webpack do anything with fonts. It doesn't need to: leave that out of your config, put your fonts in your static assets dir, point to that in your css, done. There is no need for webpack, or any bundler, to get involved here. — Mike 'Pomax' Kamermans, Aug 01 '21 at 22:30

score 1 · Accepted Answer · answered Aug 01 '21 at 22:44

First, the format for a .ttf file should be truetype.

If that doesn't work:
The best way to make sure that fonts are probably going to work depends on what browser you are using with which file format. Nowadays, many browsers are drifting towards WOFF and WOFF2 font types, but ttf should work with most browsers. You can read more here. You can use https://transfonter.org to convert font types. You can also check out this question.

Webpack won't render custom fonts

1 Answers1