1. Go to fontsource.org and find your font.
  2. Install, e.g. npm install @fontsource-variable/noto-serif

In your BaseLayout.tsx (or similiar)

1

import '@fontsource-variable/noto-serif';
  1. In tailwind.config.mjs set your font.
1
2
3
4
5
6
7
8

  theme: {
    extend: {
      fontFamily: {
        sans: ["DM Sans", ...defaultTheme.fontFamily.sans],
        serif: ["Noto Serif", ...defaultTheme.fontFamily.serif],
      },
    },
  },
  1. Use font-serif where appropriate.

References