A tiny Next.js helper for loading Google Fonts fast and asynchronously ⏩
⚠️
THIS PROJECT HAS BEEN DEPRECATED
As of Next.js 10.2, Google Fonts are automatically optimized ?
Thanks for all your love and support for this project,
Joe
A tiny next/head
helper for loading Google Fonts fast and asynchronously ⏩
Using Next.js 10? See "How does this compare to Next.js font optimization?" before continuing.
In this example, we're going to add Inter
(specifically weights 400
and 700
) to a Next.js app.
See joebell.co.uk for a working example.
Add the package to your Next.js project:
npm i next-google-fonts
Create a custom Head
component.
It's important to acknowledge that next-google-fonts
is a small next/head
component and should not be nested inside next/head
. To solve this, wrap both components with a Fragment
.
// components/head.js
import * as React from "react";
import NextHead from "next/head";
import { GoogleFonts } from "next-google-fonts";
export const Head = ({ children, title }) => (
<React.Fragment>
<GoogleFonts href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" />
<NextHead>
<meta charSet="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<title>{title}</title>
{children}
</NextHead>
</React.Fragment>
);
Add the requested Google Font/s to your styles with a sensible fallback. It really doesn't matter whether you're using CSS or Sass or CSS-in-JS:
body {
font-family: "Inter", sans-serif;
}
Run your Next.js app to see the results in action!
You should expect to see the fallback font first, followed by a switch to the Google Font/s without any render-blocking CSS warnings. Your font/s will continue to display until your app is re-hydrated.
If JS is disabled, only the fallback font will display.
Next.js 10 introduced automatic Google Font optimization, you can make a decision on which solution to use based on the following criteria:
next-google-fonts
.Next.js
font optimization.For further reading, see the Next.js issue discussion.
next-google-fonts
aims to make the process of using Google Fonts in Next.js more consistent, faster and painless: it preconnects to font assets, preloads and asynchronously loads the CSS file.
In the current iteration of next/head
, we can't make use of the familiar "media hack" method of asynchronous Google font loading:
<!-- Plain HTML -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
media="print"
onload="this.media='all'"
/>
If you'd like to track this issue in Next.js, you can follow it here: Next.js#12984.