Font not loading using app directory and tailwindcss

Answered

Sooty Tern posted this in #help-forum

Sooty TernOP

2023-08-21T23:47:56.000Z

Hello, I try to add two fonts to my website and use them with tailwind.
layout.ts

import { Rubik, Roboto_Mono, Inter } from 'next/font/google'

const rubik = Rubik({
    subsets: ['latin-ext'],
    variable: '--font-rubik'
})
const roboto_mono = Roboto_Mono({
    subsets: ['latin-ext'],
    variable: '--font-roboto-mono'
})
export default function RootLayout({children,}: {children: React.ReactNode}) {

    return (
      <html lang="en" >
        <body className={`${rubik.variable} ${roboto_mono .variable} font-sans`} >
            <Providers>
                {children}
            </Providers>
        </body>
      </html>
    )
  }

in tailwind I added them both to theme->extend->fontFamily:
tailwind.config.ts

fontFamily: {
  sans: ['var(--font-rubik)', ...fontFamily.sans],
  mono: ['var(--font-roboto-mono)', ...fontFamily.mono],
}

One thing to note is that I use 'next-themes'. Idk if this can cause an issue.
providers.tsx

'use client'

import { ThemeProvider } from 'next-themes'
import { useEffect, useState } from 'react';


export function Providers({children,}: {children: React.ReactNode}) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }


  return <ThemeProvider attribute='class'>{children}</ThemeProvider>
}

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#with-tailwind-css here is only explained how to use fonts with tailwind in the /public directory. and as far as I know, the /app directory is new, might there be a bug?

I'm quiet new to Next.JS and I didn't find any advice on github, stackoverflow or here.

Answered by Sooty Tern

im sorry for stealing your time, but thanks

View full answer