Next.js + Google font
How to use Font Optimization in Nextjs 13?
Adding any Google fonts in nextjs 13, with two lines of code.
Published in
5 min readOct 28, 2022
Next.js 13 now introduces font optimization automatically using the@next/font package. Next.js 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 Next.js, 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 with_document.js and _app.js file.
<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.
