Skip to content

rohanray/next-fonts

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Note:

This plugin was created more than 2 years back (early 2018). Nextjs did not have first class support for importing fonts without using plugins during those days. Hence, this plugin might not be needed for current and newer versions of Next.js. Please see #34

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%