Next.js Discord

Discord Forum

Next/font and tailwind problems

Unanswered
Spectacled bear posted this in #help-forum
Open in Discord
Spectacled bearOP
Hello, I use the 13.5.4 version of next.js
Sometimes the font from google fonts doesn't load and returns me an error to use a fallback font.

Also, some of my classes as an example top-[20px] sometimes are not readen and I must add it in safelist in tailwind config to work. Why? Can I add a regex pattern to not add every top px for example?

Thank you

10 Replies

Mossyrose gall wasp
hello, if your classnames not used in code in build time tailwind purges them. you should use safelist pattern if you want all specific classnames like example below:
safelist: [
    {
      pattern: /aspect-.+/,
    }
]

this one for aspect ratio.
and double check your tailwind content maybe you are not included tailwind on that folder you are working
Spectacled bearOP
i have not included the folder of this file on tailwind config. i fix it..
have you idea about the font error?
Mossyrose gall wasp
what is your font setup?
this is my font setup maybe it helps.

font.ts
import localFont from "next/font/local";

const gilroy = localFont({
  variable: "--gilroy",
  src: [
    {
      path: "../../../public/static/fonts/Gilroy/Gilroy-Regular.woff2",
      weight: "400",
      style: "normal",
    },
]
)};

export { gilroy };

layout.tsx
import cn from "classnames";

import Footer from "@/components/Footer";
import Header from "@/components/Header";

import { gilroy } from "@/utils/helper/font";

import { i18n } from "../../../i18n-config";

import "../../styles/index.scss";

export async function generateStaticParams() {
  return i18n.locales.map((locale) => ({ lang: locale }));
}

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {

  return (
    <html
      lang={params.lang}
      dir={params.lang}
      className={cn(gilroy.variable)}
    >
      <body className="">
          <main className="root">
            <Header />
            {children}
            <Footer cityMap={cityMap} />
          </main>
      </body>
    </html>
  );
}

if you have tailwind you can define like this:
 extend: {
   fontFamily: {
     gilroy: ["var(--gilroy)"],
   },
Spectacled bearOP
i dont have a local font but a font from google. thats the problem
also i dont use tailwind in the font but thank u for share with me your code and you trying to helpo
help*
Mossyrose gall wasp
you are welcome 🙂