Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

next-fonts

1.4.0 • Public • Published

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;
  }
});

inlineFontLimit

Inlines fonts with sizes below inlineFontLimit to Base64. Default value is 8192.

Example usage:

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

Examples repository

Please see https://github.com/rohanray/next-fonts-example for usage with Nextjs v9.2+

Styled components

Please see https://github.com/rohanray/next-fonts-example/tree/master/with-styled-comp for sample code to use with styled components. Live URL : https://type-error-idfldxadbv.now.sh

Keywords

none

Install

npm i next-fonts

DownloadsWeekly Downloads

61,512

Version

1.4.0

License

MIT

Unpacked Size

3.53 kB

Total Files

3

Last publish

Collaborators

  • avatar