Import fonts from woff2 files in Next.js

Place the .woff2 fonts in the public folder (otherwise you won't be able to access from the globals.css file).

├── public
|   ├── fonts
|   |   ├── font-type-regular.woff2
|   |   ├── font-type-medium.woff2
|   |   ├── font-type-bold.woff2
├── styles
|   ├── globals.css

Now, from globals.css:

CSS
@font-face {
    font-family: 'Super Font';
    src: url('/fonts/font-type-regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Super Font';
    src: url('/fonts/font-type-medium.woff2') format('woff2');
    font-weight: 500;
}
@font-face {
    font-family: 'Super Font';
    src: url('/fonts/font-type-bold.woff2') format('woff2');
    font-weight: 600;
}
html,
body{
    font-family: 'Super Font';
}