Using Open Source fonts in NextJS 14

This is a TL;DR version of the article and explains using the open-source fonts with Nextjs 14.

1. Place your open-source fonts under the public/fonts folder.

2. Add this under global.css Make sure to add your font in the url() property. Change properties as you see fit.

@font-face {
  font-family: 'CalSans';
  src: url('/fonts/CalSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

3. Now use them like this

h1, h2, h3, h4, h5, h6 {
  font-family: "CalSans", sans-serif;
  font-weight: 400;
}

Once you refresh the page they will appear as usual. You can read more about font usage with next here https://nextjs.org/docs/pages/building-your-application/optimizing/fonts