Skip to content
Import fonts in Next.js (supports woff, woff2, eot, ttf & otf)
Branch: master
Clone or download
Pull request Compare This branch is 27 commits ahead, 38 commits behind twopluszero:master.
Latest commit 362f314 Apr 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore initial commit Feb 13, 2018
README.md Update README.md Apr 8, 2019
index.js isServer path Jan 22, 2019
package-lock.json Upgrade dependencies Sep 21, 2018
package.json inter mac Jan 23, 2019

README.md

Next.js + Fonts

Import fonts in Next.js (woff, woff2, eot, ttf, otf & svg)

Installation

npm install --save next-fonts

or

yarn add next-fonts

Usage

Create a next.config.js in your project

// next.config.js
const withFonts = require('next-fonts');
module.exports = withFonts();

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withFonts = require('next-fonts');
module.exports = withFonts({
  webpack(config, options) {
    return config;
  }
});

assetPrefix

You can serve remote resources by setting assetPrefix option.

Example usage:

// next.config.js
const withFonts = require('next-fonts');
module.exports = withFonts({
  assetPrefix: 'https://example.com',
  webpack(config, options) {
    return config;
  }
});

Include SVG fonts

You can also (optionally) include SVG fonts by setting enableSvg option.

Example usage:

// next.config.js
const withFonts = require('next-fonts');
module.exports = withFonts({
  enableSvg: true,
  webpack(config, options) {
    return config;
  }
});

Styled components

Please see https://github.com/rohanray/font-error for sample code to use with styled components. Live URL : https://type-error-idfldxadbv.now.sh

You can’t perform that action at this time.