Скачать или смотреть How to Fix the Wrong Font Issue When Using Custom Fonts in Next.js with Tailwind CSS

A step-by-step guide on how to correctly implement custom fonts in your Next.js and Tailwind CSS projects, resolving common issues like displaying the wrong font.
---
This video is based on the question https://stackoverflow.com/q/62502500/ asked by the user 'Thanh-Quy Nguyen' ( https://stackoverflow.com/u/6259019/ ) and on the answer https://stackoverflow.com/a/62621218/ provided by the user 'Thanh-Quy Nguyen' ( https://stackoverflow.com/u/6259019/ ) 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: Custom font in Next.js + Tailwind: no error, but wrong font

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 Fix the Wrong Font Issue When Using Custom Fonts in Next.js with Tailwind CSS

When developing a web application with Next.js and Tailwind CSS, many developers face the problem of custom fonts not displaying correctly. In a typical scenario, you might find that after following all the right steps, your browser reverts to a backup font like sans-serif instead of the custom font you intended to use.

In this guide, we will explore how to set up a custom font, specifically SpaceGrotesk, in a Next.js project using Tailwind CSS and discuss common pitfalls that might lead to the font displaying incorrectly.

Step-by-Step Solution

Let’s break down the solution into manageable steps. By following these steps carefully, you should be able to use your custom font seamlessly.

Step 1: Install the next-fonts package

The first action is to install the next-fonts package, which helps you manage font files in Next.js.

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

Step 2: Update your next.config.js

After installing next-fonts, import it into your next.config.js file. Here’s how the updated file should look:

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

Step 3: Organize your fonts

Ensure your font files are correctly organized in the public directory. For example, place your SpaceGrotesk font in this path:

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

Step 4: Import the font in CSS

To make your custom font recognized by Tailwind CSS, you need to declare it in your CSS file using @ font-face. Your declaration will look something like this:

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

Important: Make sure to omit the /public prefix in the URL. A common mistake is to include it, which will lead to the font not loading correctly.

Step 5: Use the custom font

Now that the font is imported, you can apply it like any other CSS property. For example:

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

Step 6 (Optional): Configure for class usage

If you want to use the custom font with Tailwind's utility classes, extend your Tailwind configuration by adding the font to your tailwind.config.js:

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

Now, you can directly use the class font-space-grotesk in your HTML!

Conclusion

By following these steps, you should be able to implement custom fonts in your Next.js and Tailwind CSS project without any issues. If you find your custom font still isn’t displaying, double-check the paths and configurations you've set up. Remember, small mistakes in file paths or configurations can lead to big headaches, so stay vigilant!

With your custom font now properly set up, you can enjoy a more tailored design for your web application. Feel free to ask any questions or share your experiences in the comments below!