Next.js Discord

Discord Forum

Montserrat font on next/font

Answered
Ejayz || PiggyDev posted this in #help-forum
Open in Discord
Ejayz || PiggyDevOP
import { Font } from 'next/font';

const font = Font.fromMontserrat({
  weights: [400, 700], // Specify the desired font weights
});
@dumbboy
Answered by dumbboy
import "../globals.css";

import type { Metadata } from "next";
import Header from "@/components/custom/Header";
import { ThemeProvider } from "@/components/custom/ThemeProvider";
import { Analytics } from "@vercel/analytics/react";
import { NextAuthProvider } from "../providers";

import { Space_Grotesk, Montserrat, Lato, Roboto } from "next/font/google";

const SpaceGroteskFont = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-grotesk",
  display: "swap",
});

const MontserratFont = Montserrat({
  subsets: ["latin"],
  variable: "--font-montserrat",
  display: "swap",
});

const LatoFont = Lato({
  subsets: ["latin"],
  variable: "--font-lato",
  display: "swap",
  weight: "400",
});

const RobotoFont = Roboto({
  subsets: ["latin"],
  variable: "--font-roboto",
  display: "swap",
  weight: "400",
});

export const metadata: Metadata = {
  title: "DevSynced",
  description: "DevSynced - A community for developers to share and learn",
  openGraph: {
    type: "website",
    locale: "en_IE",
    url: "https://devsynced.vercel.app/",
    siteName: "DevSynced",
    title: "DevSynced",
    description: `DevSynced - A community for developers to share and learn`,
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={`${SpaceGroteskFont.variable} ${MontserratFont.variable} ${LatoFont.variable} ${RobotoFont.variable}`}
    >
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <NextAuthProvider>
            <Header />
            <div className="container py-8">{children}</div>
          </NextAuthProvider>
        </ThemeProvider>
        <Analytics />
      </body>
    </html>
  );
}
View full answer

28 Replies

dumbboy
so, whats the issue?
Ejayz || PiggyDevOP
it wont import
see there is an error at Font for some reason .
dumbboy
Can't we import it globally and attach to tailwind, and use
this is how I did it
Ejayz || PiggyDevOP
ohhh i see .
i did see the google font now
how to use is the question lmao
dumbboy
import "../globals.css";

import type { Metadata } from "next";
import Header from "@/components/custom/Header";
import { ThemeProvider } from "@/components/custom/ThemeProvider";
import { Analytics } from "@vercel/analytics/react";
import { NextAuthProvider } from "../providers";

import { Space_Grotesk, Montserrat, Lato, Roboto } from "next/font/google";

const SpaceGroteskFont = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-grotesk",
  display: "swap",
});

const MontserratFont = Montserrat({
  subsets: ["latin"],
  variable: "--font-montserrat",
  display: "swap",
});

const LatoFont = Lato({
  subsets: ["latin"],
  variable: "--font-lato",
  display: "swap",
  weight: "400",
});

const RobotoFont = Roboto({
  subsets: ["latin"],
  variable: "--font-roboto",
  display: "swap",
  weight: "400",
});

export const metadata: Metadata = {
  title: "DevSynced",
  description: "DevSynced - A community for developers to share and learn",
  openGraph: {
    type: "website",
    locale: "en_IE",
    url: "https://devsynced.vercel.app/",
    siteName: "DevSynced",
    title: "DevSynced",
    description: `DevSynced - A community for developers to share and learn`,
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={`${SpaceGroteskFont.variable} ${MontserratFont.variable} ${LatoFont.variable} ${RobotoFont.variable}`}
    >
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <NextAuthProvider>
            <Header />
            <div className="container py-8">{children}</div>
          </NextAuthProvider>
        </ThemeProvider>
        <Analytics />
      </body>
    </html>
  );
}
Answer
dumbboy
this is layout
Extend font family in tailwind.config.js

  fontFamily: {
        SpaceGrotesk: ["var(--font-grotesk)", "sans-serif"],
        Montserrat: ["var(--font-montserrat)", "sans-serif"],
        Lato: ["var(--font-lato)", "sans-serif"],
        Roboto: ["var(--font-roboto)", "sans-serif"],
      },
Hope it helps
Ejayz || PiggyDevOP
${SpaceGroteskFont.variable} ${MontserratFont.variable} ${LatoFont.variable} ${RobotoFont.variable}
is this part required ?
dumbboy
yes, to use that variable in tailwind, you need to IG
If you add .classname instead of .variable it will prolly apply to all layout IG.
Lemme know if it worked, after testing.
Ejayz || PiggyDevOP
is it already montserrat ?
lmao
i think it works ?
dumbboy
Congrats, my internet was gone
Ejayz || PiggyDevOP
lol
good thing you are being welcome backed
dumbboy
@risky I did not help 15, but 1 is not bad too IG.
Ejayz || PiggyDevOP
hahah now we are even with my question last time
@dumbboy <@657067112434499595> I did not help 15, but 1 is not bad too IG.
risky
At the same time, 89 is alot too..