Oct 28, 2022
Nextjs + Google font
How to use Font Optimization in Nextjs 13?
Adding any google fonts in nextjs 13, with two lines of code.
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
- No need to import google Fonts with a CDN link.
- Less and clean code.
- Automatically optimize font for production.
- 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
- Install
@next/fontpackage - Select font from google font
- 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
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.
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 .
- Import your font
- Config the font property
- 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'
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>
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.
