next-google-fonts-helper
v1.0.2
Published
Little component for loading Google fonts fast in Next.js
Downloads
7
Readme
next-google-fonts-helper
Little component for loading Google fonts fast in Next.js
Table of Contents
About
Based on this article by Harry Roberts, an efficient strategy for loading fonts from the Google Fonts CDN.
Features
- Preemptively warm up the fonts’ origin.
- Initiate a high-priority, asynchronous fetch for the CSS file. Works in most modern browsers.
- Initiate a low-priority, asynchronous fetch that gets applied to the page only after it’s arrived. Works in all browsers with JavaScript enabled.
- In the unlikely event that a visitor has intentionally disabled JavaScript, fall back to the original method.
Usage
In your _document.js:
import Head from "next/head"
import NextGoogleFontsHelper from "next-google-fonts-helper"
// ...
<Head>
<NextGoogleFontsHelper fonts={['Montserrat:wght@300;400;500;600']} />
</Head>Install
This project uses node and npm.
$ npm install next-google-fonts-helper
$ # OR
$ yarn add next-google-fonts-helperContribute
- Fork it and create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am "Add some feature" - Push to the branch:
git push origin my-new-feature - Submit a pull request
License
MIT