Nextjs
Published in

Nextjs

How to use Font Optimizing in Nextjs 13?

Nextjs + Google font

How to use Font Optimization in Nextjs 13?

Nextjs 13 now introduce font Optimitaion automatically, using the@next/font package. Nextjs 13 does not send extra external network requests to google fonts. It helps to optimize the performance and stability of the website. Does not face a layout shift error in nextjs which is more important for SEO.

There is no need to download the google fonts locally and no need for CDN links.

In the old ways, we used CDN links look like in _document.js and _app.js .

<Head><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" /><link href="https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@200;300&family=Montserrat:wght@300;400&display=swap" rel="stylesheet" /></Head>

All the code is available on GitHub.

Demo

https://font-optimizing-in-nextjs-13.vercel.app/

Benefits

  1. No need to import google Fonts with a CDN link.
  2. Less and clean code.
  3. Automatically optimize font for production.
  4. Remove external network requests from google fonts.

Note

The @next/font package only works with Google Fonts. It does not work with other font providers. If you use any other font, you can download it locally and config with the @next/font package.

Let's start

  1. Install @next/font package
  2. Select font from google font
  3. How to Use

Install @next/font package

To enable font optimization in nextjs, you need to download the @next/font package in your nextjs project. @next/font does not come to preinstall in nextjs.

Currently, the @next/font package is in the beta stage. So that you install Spratly from the nextjs main package, in the future, the nextjs team will add the @next/font stable package to nextjs and does not need to install separately.

npm install @next/fontoryarn add @next/fontorpnpm add @next/font
Install nextjs font optimize package
Install @next/font

Select font from google font

Now that you have successfully installed @next/font the package. You do not need any other configuration.

Firstly select a font from google fonts. For example purposes, I select Ubuntu font. You can select any other font, whatever you like.

Select ubuntu font from google font
Select ubuntu font from google font

How to Use

You can use any google font in nextjs very easily. Firstly select a font, then Import the google font with @next/font .

  1. Import your font
  2. Config the font property
  3. How to use it

Import your font

First, select a font from google Fonts and then import a font with the same name mentioned in Google Fonts.

import { Ubuntu} from '@next/font/google'
Import ubuntu font in nextjs with @next/font
Import ubuntu font in nextjs

Config the font property

Every font comes with lots of options or arguments. like font weight, style , subsets , variable, etc.

@next/font package asks you for some options or arguments on configuration time. You can go with the default configuration or change some configurations like font weight, subsets(Style), etc. It helps to use a specific font style with a font-weight. Choosing a specific style of font help to optimize nextjs for production.

 import { Ubuntu} from '@next/font/google'// config the ubuntu font and use it with deafult arguments.const ubuntu = Ubuntu()or // change some default config of ubuntu fontsconst ubuntu = Ubuntu({   weight: '400',})

You can learn more about font function arguments on nextjs docs.

How to use it

You can use the selected font in HTML and CSS after configuration.

import { Ubuntu,Island_Moments} from '@next/font/google'// const ubuntu = Ubuntu({ subsets: ['latin'] })const ubuntu = Ubuntu({weight: '400'})export default function Home() {return (<h1 className={ubuntu.className}> Home page </h1> );}

FAQ

Does the @next/font package optimize the website?

yes @next/font package optimize the website.

How many fonts are used with the @next/font package?

It depends on your project requirement, and you can use multiple fonts on one page.

How to import two-word font like Island Moments font with @next/font?

Convert the space into _ and then import it.

import { Island_Moments } from '@next/font/google'// config font
const IslandMoments= Island_Moments({
weight:'400',
subsets:['latin']
})
// use it
<p className={IslandMoments.className}> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
Import font in nextjs with @next/font
Import font in nextjs with @next/font

How to use Local font in nextjs

// import localFont functionimport localFont from '@next/font/local'// config your font 
const openSansExtraBold = localFont({
src: '../asset/OpenSans/OpenSans-ExtraBoldItalic.ttf'
})// use it <h1 className={openSansExtraBold.className}> Blog post 1 </h1>

How to use google font globally with the @next/font package?

The @next/font package does not work with _document.js and, but it is working with _app.js . The _app.js is a custom page that runs on every page. We use _app.js, and CSS root variable combined and use it globally on the website.

We define a CSS variable name inside the font configuration.

// _app.jsimport "../styles/globals.css";
import { Oxygen} from '@next/font/google'
const ubuntu = Oxygen({
weight: '400',
variable: '--oxygen-font'
})

export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}

We use the CSS variable name inside the global CSS file.

/* globals.css */html, body { 
padding: 0;
margin: 0;
font-family: var(--oxygen-font);}

Conclusion

The nextjs team work very well related to nextjs. Fonts optimization is a big issue with nextjs, resolved in nextjs 13.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontendweb, and Sign up for a free newsletter on nextjs.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/