nextjs-google-fonts
Why nextjs-google-fonts ?
This plugin download google fonts locally, so your next.js app doesn't want to download google fonts data from every enter to your page.
Installing
Using npm:
$ npm install nextjs-google-fonts
Fast setup
Add options into next.config.js:
const { withGoogleFonts } = require("nextjs-google-fonts");
module.exports = withGoogleFonts({
googleFonts: {
fonts: [
"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap",
],
},
});
Add fonts into <Head/>:
import Head from "next/head";
import { GoogleFonts } from "nextjs-google-fonts/GoogleFonts";
export default function index() {
return (
<Head>
{GoogleFonts()}
</Head>
);
}Advanced setup
const { withGoogleFonts } = require("nextjs-google-fonts");
module.exports = withGoogleFonts({
googleFonts: {
fonts: [], // required
publicFolder: "public", // optional
fontsFolder: "fonts", // optional
prevent: true, // optional
remove: true, // optional
},
});-
fonts- (default []) Array of google fonts urls (required) -
publicFolder- (default "public") next.js 'public' folder -
fontsFolder- (default "fonts") folder name where data should be saved (fonts+styles) -
prevent- (default true) prevent download/update fonts for every your 'npm run dev' -
remove- (default true) remove previous fonts if you change something in 'fonts' array (works only if 'prevent' is 'true')
Structure of downloaded fonts (with default parameters)
.
├── public
│ └── fonts
│ ├── s
│ │ └── ...woff2
│ └── data.json
├── src
├── .gitignore
├── next.config.js
...