Little component for loading Google fonts fast in Next.js
Based on this article by Harry Roberts, an efficient strategy for loading fonts from the Google Fonts CDN.
- 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.
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>
This project uses node and npm.
$ npm install next-google-fonts-helper
$ # OR
$ yarn add next-google-fonts-helper
- 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
MIT