Next.js + Fonts

Import font files in your Next.js project.

The fonts will be added to .next/static/fonts. Also a chunk hash is added to file names in production.

Install

$ npm install --dev @preco21/next-fonts

Usage

In next.config.js:

const withFonts = require('@preco21/next-fonts')
module.exports = withFonts()

Optionally extend the config as you like:

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

Options

This plugin accepts a number of options that you can customize the build:

module.exports = withFonts({
  extensions: ['woff', 'woff2'],
  urlLoaderOptions: {
    limit: 10000
  }
})

extensions

Type: string[] Default: ['woff', 'woff2', 'eot', 'ttf', 'otf']

Specify a extension set on which files to identify as a fonts.

include

Type: RegExp

Same as the original webpack's Rule.include.

exclude

Type: RegExp

Same as the original webpack's Rule.exclude.

urlLoaderOptions

Type: object

Same as the original url-loader's option.

assetPrefix

Type: string Default: ''

Same as the original assetPrefix option, consumed in the plugin to resolve the domain the Next.js is hosted on.

License

MIT