Next.js Discord

Discord Forum

Fonts not loading

Unanswered
Rough harvester ant posted this in #help-forum
Open in Discord
Rough harvester antOP
I'm using this method of importing fonts
//Fonts.ts
import { Merriweather, Ruda } from "next/font/google";
export const merriweather = Merriweather({
  weight: ["400", "700", "900"],
  style: "normal",
  subsets: ["latin"],
  display: "swap",
});
export const ruda = Ruda({
  style: "normal",
  subsets: ["latin"],
  display: "swap",
});

This works however these fonts sometimes don't work, resulting in their fall-backs being used. I'm not sure why (I'm in localhost mode if it helps)

1 Reply

Mossyrose gall wasp
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)"],
   },