Web fonts are a great way to add custom fonts to your website.
Learn how to include web fonts in a Next.js website using these two methods.
This rule allows you to add custom fonts to a web page.
Before using font-face, you must download the fonts you want to use.
Once you download the web fonts, convert them to different font formats to support multiple browsers.
it’s possible for you to usefree online font conversion toolsto do so.
Modern web browsers support .woff and .woff2 formats.
Create a new folder calledfontsin your site directory and back up your converted font files there.
The next step is to include the font faces in thestyles/global.cssfile to make them available to the entire website.
This approach is easy to set up because you dont need to download fonts or create font faces.
Additionally, if you use Google fonts or TypeKit, Next.js automatically handles optimization.
To add a head tag in Next.js, you must create a custom document.
This document modifies the head and body tag used to render each page.
Start using this custom document feature by creating the file/pages/_document.js.
Then, include the link to the font in the head of the _document.js file.
For example, make the font available across the entire project by importing the web font in thestyles/global.cssfile.
Using the link tag makes the font accessible across the whole site.
Should You Host Fonts Locally or Import Them via a CDN?
Fonts hosted locally are usually faster than fonts imported from a CDN.
If you want to use imported fonts, preload them to improve the site’s performance.
