npmpackage.info

Gathering detailed insights and metrics for next-google-fonts

Other packages similar to next-google-fonts

next-google-fonts-loader

1.0.2

[npm]: https://www.npmjs.com/package/next-google-fonts-loader

next-google-fonts-helper

1.0.2

Little component for loading Google fonts fast in Next.js

astro-font

1.1.0

An Astro integration to optimize Local & Google fonts inspired by @next/font

nextjs-google-fonts

3.4.0

Plugin for next.js

Gathering detailed insights and metrics for next-google-fonts

next-google-fonts - 2.2.0 | npmpackage.info

next-google-fonts

A tiny Next.js helper for loading Google Fonts fast and asynchronously ⏩

2.2.0

425

MIT

TypeScript

Installations

npm install next-google-fonts

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

13.12.0

NPM Version

6.14.4 Score

27.3

Supply Chain

70.3

Quality

75.6

Maintenance

100

Vulnerability

91.4

License

Pull Requests

Open

0

Total

114

Closed

27

Merged

87

Issues

Open

0

Total

12

Closed

12

Releases

v2.2.0

Updated on Mar 30, 2021

v2.1.0

Updated on Mar 15, 2021

v2.0.0

Updated on Feb 26, 2021

v1.3.0

Updated on Feb 25, 2021

v1.1.0

Updated on Jun 09, 2020

v1.0.0

Updated on Jun 06, 2020

View All 6 releases

Languages

TypeScript

TypeScript (100%)

Developer

joe-bell

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

425 Stars

191 Commits

6 Forks

3 Watchers

1 Branches

3 Contributors

Updated on Jun 23, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

2.2.0

Package Id

next-google-fonts@2.2.0

Size

6.10 kB

NPM Version

6.14.4

Node Version

13.12.0

Published on

Mar 30, 2021

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

next react react-dom

Dev Dependencies

@types/node @types/react commitizen cz-conventional-changelog husky lint-staged microbundle next prettier react react-dom typescript

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?" before continuing.

Setup
FAQs

Setup

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:
```
1npm 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.

1// components/head.js
2import * as React from "react";
3import NextHead from "next/head";
4import { GoogleFonts } from "next-google-fonts";
5
6export const Head = ({ children, title }) => (
7  <React.Fragment>
8    <GoogleFonts href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" />
9    <NextHead>
10      <meta charSet="UTF-8" />
11      <meta
12        name="viewport"
13        content="width=device-width, initial-scale=1.0"
14      />
15      <meta httpEquiv="x-ua-compatible" content="ie=edge" />
16
17      <title>{title}</title>
18
19      {children}
20    </NextHead>
21  </React.Fragment>
22);

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:
```
1body {
2  font-family: "Inter", sans-serif;
3}
```
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.

FAQs

How does this compare to Next.js font optimization?
Why?

How does this compare to Next.js font optimization?

Next.js 10 introduced automatic Google Font optimization, 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.

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, we can't make use of the familiar "media hack" method of asynchronous Google font loading:

1<!-- Plain HTML -->
2<link
3  rel="stylesheet"
4  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
5  media="print"
6  onload="this.media='all'"
7/>

If you'd like to track this issue in Next.js, you can follow it here: Next.js#12984.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

49 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-vxf5-wxwp-m7g9
Warn: Project is vulnerable to: GHSA-9gr3-7897-pp7m
Warn: Project is vulnerable to: GHSA-25mp-g6fv-mqxx
Warn: Project is vulnerable to: GHSA-fmvm-x8mv-47mj
Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc
Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7

Score

3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to next-google-fonts

Other packages similar to next-google-fonts

next-google-fonts

Installations

Developer Guide

No

CommonJS

13.12.0

6.14.4

Score

Pull Requests

0

114

27

87

Issues

0

12

12

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

next-google-fonts

Table of Contents

Setup

FAQs

How does this compare to Next.js font optimization?

Why?

10

10

10

3

0

0

0

0

0

0

0

0

3

/10