Custom fonts with TailwindCSS July 28, 2021

I recently set up custom fonts in a project using NextJS and TailwindCSS. Here is how you can do it:

1. Add the font files to the public folder. For example if you are using the Inter font family, you can create public/fonts/inter and add the font files.

2. Update the global CSS file to add the new font-face.

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Add the font using @font-face */

@font-face {
  font-family: "Inter";
  src: url(/fonts/inter/Inter-Regular) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

3. Update the tailwind configuration file (tailwind.config.js) to generate a class for the new font.

extend: {
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
    },
  },

4. Use the generated classname to apply the custom font. For example, in this case we can use the generated font-inter class.