Overview

While styling the typography for my portfolio project, I wanted to use Google Fonts with Tailwind CSS and Next.js. I used next/font/google to load the Inter font, but I wasn’t sure how to make it available as a Tailwind class like font-inter, or how to set it as the default font across the site.

After experimenting and reviewing the Tailwind v4 approach, I was able to clarify the roles of className, variable, and @theme in making fonts reusable and customizable.

This setup allowed me to apply Inter site-wide while keeping Tailwind classes semantic and reusable.

What I Learned

• next/font/google
  • Use in layout.tsx to load fonts at build time
  • The className property can be used for scoped application
  • The variable property defines a CSS variable like --font-inter for use in Tailwind or custom styles
• Tailwind + CSS Variables
  • @theme { --font-inter: var(--font-inter); } is needed to make font-inter usable as a class
  • @theme inline { --font-sans: var(--font-inter); } lets me replace Tailwind’s default font for font-sans
• Best Practices
  • Use className when the font is only needed in a specific component
  • Use variable + @theme when the font should be shared across Tailwind classes or used as the default
  • For global fonts, map to --font-sans so that Tailwind's default typography utilities pick it up