Import fonts in Next.js (woff, woff2, eot, ttf, otf & svg)
npm install --save next-fonts
or
yarn add next-fonts
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;
}
});
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;
}
});
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;
}
});
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
}
})
Please see https://github.com/rohanray/next-fonts-example for usage with Nextjs v9.2+
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