Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joe-bell/next-google-fonts
A tiny Next.js helper for loading Google Fonts fast and asynchronously ⏩
https://github.com/joe-bell/next-google-fonts
font-loading google-fonts nextjs
Last synced: about 1 month ago
JSON representation
A tiny Next.js helper for loading Google Fonts fast and asynchronously ⏩
- Host: GitHub
- URL: https://github.com/joe-bell/next-google-fonts
- Owner: joe-bell
- License: mit
- Archived: true
- Created: 2020-05-27T07:48:31.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-16T04:40:48.000Z (over 2 years ago)
- Last Synced: 2024-11-01T01:16:33.689Z (about 2 months ago)
- Topics: font-loading, google-fonts, nextjs
- Language: TypeScript
- Homepage: https://joebell.co.uk/blog/adding-google-fonts-to-next-js
- Size: 1.19 MB
- Stars: 424
- Watchers: 4
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
⚠️
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
---
next-google-fonts
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?"](#how-does-this-compare-to-nextjs-font-optimization) before continuing.
## Table of Contents
1. [Setup](#setup)
2. [FAQs](#faqs)
## Setup
In this example, we're going to add [`Inter`](https://fonts.google.com/specimen/Inter) (specifically weights `400` and `700`) to a Next.js app.
See [joebell.co.uk](https://joebell.co.uk) for a working example.
1. Add the package to your Next.js project:
```sh
npm i next-google-fonts
```
2. Create a custom `Head` component.
It's important to acknowledge that `next-google-fonts` is a small [`next/head`][next/head] component and should **not** be nested inside [`next/head`][next/head]. To solve this, wrap both components with a `Fragment`.
```jsx
// components/head.js
import * as React from "react";
import NextHead from "next/head";
import { GoogleFonts } from "next-google-fonts";
export const Head = ({ children, title }) => (
{title}
{children}
);
```
3. 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:
```css
body {
font-family: "Inter", sans-serif;
}
```
4. [Run your Next.js app](https://nextjs.org/docs/api-reference/cli#build) 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.
## FAQs
- [How does this compare to Next.js font optimization?](#how-does-this-compare-to-nextjs-font-optimization)
- [Why?](#why)
### How does this compare to Next.js font optimization?
Next.js 10 introduced [automatic Google Font optimization](https://github.com/vercel/next.js/pull/14746), you can make a decision on which solution to use based on the following criteria:
- "My fonts are **not priority** and can be loaded **asynchronously**" - use `next-google-fonts`.
- "My fonts **are priority** and should **not** be loaded **asynchronously**" - use `Next.js` font optimization.
For further reading, see the [Next.js issue discussion](https://github.com/vercel/next.js/issues/16065).
### Why?
`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`][next/head], we can't make use of the familiar "media hack" method of asynchronous Google font loading:
```html
```
If you'd like to track this issue in Next.js, you can follow it here: [Next.js#12984](https://github.com/zeit/next.js/issues/12984).
[next/head]: https://nextjs.org/docs/api-reference/next/head