How to Properly Change Font-Face Generated by Webpack 5

Описание: Learn how to fix font-face generation issues in Webpack 5 by prepping the correct publicPath for webfonts.
---
This video is based on the question https://stackoverflow.com/q/66120743/ asked by the user 'lonix' ( https://stackoverflow.com/u/9971404/ ) and on the answer https://stackoverflow.com/a/66132900/ provided by the user 'lonix' ( https://stackoverflow.com/u/9971404/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Change font-face generated by webpack 5

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Properly Change Font-Face Generated by Webpack 5

If you're using Webpack 5 and are running into issues with your web fonts not loading correctly in your project, you're not alone. A common problem arises when the generated @ font-face CSS contains incorrect paths to the font files, leading to them not being found by the browser. In this guide, we’ll guide you through the solution to ensure that your custom fonts are served correctly from your Webpack build.

Understanding the Problem

In your setup, the output directory structure looks like this:

[[See Video to Reveal this Text or Code Snippet]]

The issue occurs when the @ font-face rule in your compiled CSS ends up looking like this:

[[See Video to Reveal this Text or Code Snippet]]

As you can see, the URL generated for the font is relative (url(fonts/roboto.woff2)), which means it will not resolve correctly when the CSS file is loaded. You need that URL to include the path to the wwwroot directory, like this: url(/wwwroot/fonts/roboto.woff2).

The Solution

The fix is straightforward! You need to adjust the publicPath in your Webpack output configuration. Here’s how you can do it:

Step-by-Step Solution

Locate Your Webpack Configuration File: This may be named webpack.config.js or something similar.

Modify the Output Section: In the output object of your configuration, update the publicPath property as follows:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Changes

publicPath: By setting the publicPath to /wwwroot/, you inform Webpack to prepend this path to any assets references in your compiled files. This change ensures that the generated CSS will correctly point to the location of your web fonts.

Conclusion

By modifying the publicPath in your Webpack output configuration, you fix path resolution issues for your web fonts, allowing them to load correctly in your applications. This simple change can save you from a lot of frustration and ensure that your custom fonts render beautifully across your site.

If you run into any further issues, consider reviewing your Webpack configuration or checking your network tab in developer tools to troubleshoot asset loading problems. Happy coding!