How to Use @next/font to Optimize Fonts in Next.js

Are fonts slowing down your site's performance? Optimize the font loading time of your application using this package.

You may want to use custom fonts to make your Next.js application more visually appealing. Using custom fonts can significantly enhance the look and feel of your website, but it can also slow down your site's performance if not optimized properly. The @next/font package is a solution to this problem.

The @next/font package provides a simple and efficient way to optimize font loading in Next.js, improving page loading time and overall performance. This article provides information on how to use @next/font in your Next.js project.

You can install the @next/font package by running the following command in your terminal:

If you are using yarn, you can install the package by running this command:

The @next/font package optimizes the usage of Google fonts. The @next/font automatically self-hosts the Google fonts on the Next.js server so that no request is sent to Google to get the fonts.

To use a Google font in your application, you will import the font as a function from @next/font/google into the _app.js file in the pages directory:

In the code block above, you created a variable font using the Roboto font function. The subset property subsets the font to the Latin characters alone; if you use another language, you can subset the font to that language.

You can also specify the font weight along with the font style when defining the font:

You specify multiple font weights and font styles using arrays.

For example:

Next, you will wrap your components in a main tag and pass the font as a class to the main tag:

Rendering your application with the code block above will apply the font to your entire application. Alternatively, you can apply the font to a single page. To do this, you add the font to a specific page.

Like so:

The @next/font package also optimizes the usage of local fonts. The technique of optimizing local fonts through the @next/font package is quite similar to the optimization of Google fonts, with subtle differences.

To optimize local fonts, utilize the localFont function provided by the @next/font package. You import the localFont function from @next/font/local and then define your variable font before using the font in your Next.js application.

Like so:

You define the variable font myFont using the localFont function. The localFont function takes an object as its argument. The object has a single property, src, which is set to the file path of the font file in the WOFF2 format "./my-font.woff2".

You can use multiple font files for a single font family. To do this, you set the src property to an array containing objects of the different fonts and their properties.

For example:

To use the @next/font package with Tailwind CSS, you need to use CSS variables. To do this, you will define your font using Google or local fonts and then load your font with the variable option to specify the CSS variable name.

For example:

In the code block above, you created the font, inter, and set the variable to --font-inter. The className of the main element is then set to the font variable and font-sans. The inter.variable class will apply the inter font to the page, and the font-sans class will apply the default sans-serif font.

Next, you add the CSS variable to the tailwind configuration file tailwind.config.cjs:

You can now apply the font in your application using the font-sans class.

The @next/font package is a simple and effective way to optimize font loading in Next.js. This package ensures that your custom fonts are loaded efficiently, improving your website's performance and user experience. This article provides information on how to set up the @next/font package and utilize it in your Next.js application. You can further improve your site's performance by optimizing images.

Noble Okafor is a skilled software engineer with over 3 years of navigating the programming field. He has a passion for building optimized JavaScript, native and cross-platform mobile and web software solutions. He strives to document his knowledge and lessons through his technical articles with over a year of experience in writing. The primary focus and aim of these articles is to simplify the complexities around software engineering topics.