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.