Revision history [back]

To load custom fonts in Next.js, you can follow these steps:

1. Place your font files (e.g. .woff, .woff2) into the 'public' directory of your Next.js project.

2. Create a CSS file (e.g. 'fonts.css') and import your font files using @font-face. For example:

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'), url('/fonts/myfont.woff') format('woff'); }

1. In your Next.js component, import the CSS file using the 'import' statement.

import '../styles/fonts.css';

1. Use the font in your styles. For example:

h1 { font-family: 'MyFont', sans-serif; }

1. Done! Your custom font should now be loaded in your Next.js app.

Note: If you are using a CSS-in-JS library like styled-components, you can still follow the same steps above, but modify step 2 to include the @font-face declaration in your styled-component.