How lead my NextJS app to accept otf and ttf fonts?
For other people who are still suffering in this problem
In the latest versions of next, you store all of your static assets in /public
directory which is on the root of your project. In that directory, store all your font files in a directory /fonts
.
Then:
@font-face {
font-family: 'font-name';
src: url('/fonts/font-name.ttf'); // pattern: /directoryName/file.extension
}
/* In your css file where you want to use the font */
.element {
font-family: 'font-name';
}
I used the following dependencies
npm install next-fonts
My next.config.js
looked like this
const withFonts = require('next-fonts');
module.exports = withFonts({
enableSvg: true,
webpack(config, options) {
return config;
}
});
Resolved with next-fonts. Just install it in your next.config.js and you are done.