CODEWITHSUNDEEP
next.jstailwind-cssgoogle-fonts
Jack Himes
Jack Himes

Reputation: 29

How to correctly integrate next/font with Tailwind CSS for custom fonts in a Next.js application?

I am trying to integrate a custom font using next/font in my Next.js application and configure it with Tailwind CSS. Despite following the Next.js documentation for next/font, I cannot get the font to apply correctly.

Here's a brief overview of what I've attempted:

Implementation Details Font Loading in _app.tsx:

  1. I used next/font to load the 'Outfit' font with the following code:
import { Outfit } from 'next/font/google';

const outfit = Outfit({
  subsets: ['latin'],
  variable: '--font-outfit',
});

function MyApp({ Component, pageProps }) {
  return (
    <div className={outfit.variable + " font-sans"}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;
  1. Tailwind CSS Configuration:
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-outfit)', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Example of it being called:

<h1 className="text-6xl text-green-text font-sans pt-36">

Problem: Despite these configurations, the font does not appear as expected. It seems like the CSS variable --font-outfit is either not being applied correctly or not recognized by Tailwind CSS.

Any suggestions or insights would be greatly appreciated!

Upvotes: 2

Views: 1991

Answers (1)

user25475105
user25475105

Reputation: 1

Not sure if you figured out the answer yet. I used the same code as you had in my project with Next14 with Root Layout and it worked.

Only difference I can see relative to the docs is using the <main> tag but I'm not sure if that would make a difference.

Is your file captured under the regex of module.exports > content?

Upvotes: 0

Related Questions