next-google-fonts
Advanced tools
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.
FAQs
Load Google Fonts Asynchronously in Next.js
The npm package next-google-fonts receives a total of 873 weekly downloads. As such, next-google-fonts popularity was classified as not popular.
We found that next-google-fonts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.