I have a small project in progress using webpack.
One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration.
My custom fonts are located within the src folder of my project.
This is an excerpt from my webpack configuration 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,
},
};
Below is a snippet of my CSS file where I declare font faces:
@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;
}
Additionally, I've applied one of the custom fonts to an h1 element in my CSS:
#header h1 {
font-family: 'wearealien';
}
However, despite everything seeming to be in order and no console errors being reported, the custom font doesn't render on the page. When inspecting with devtools, the font-family: 'werealienn' property appears active but does not visibly affect the text. Interestingly, if I manually access the font URL generated by webpack like
http://localhost:8080/8ac2a6173dd38f2383fd.ttfThe lack of errors and seemingly correct handling of fonts by webpack has left me puzzled as to why the font isn't rendering properly. Any insights or suggestions would be greatly appreciated.