Montserrat font on next/font

Answered

Ejayz || PiggyDev posted this in #help-forum

Open in Discord

Ejayz || PiggyDevOP

2023-10-01T17:10:49.000Z

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

2023-10-01T17:11:15.000Z

so, whats the issue?

Ejayz || PiggyDevOP

2023-10-01T17:11:21.000Z

it wont import

see there is an error at Font for some reason .

2023-10-01T17:12:20.000Z

Can't we import it globally and attach to tailwind, and use

this is how I did it

Ejayz || PiggyDevOP

2023-10-01T17:12:45.000Z

ohhh i see .

i did see the google font now

how to use is the question lmao

2023-10-01T17:13:19.000Z

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

2023-10-01T17:13:22.000Z

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

2023-10-01T17:14:52.000Z

${SpaceGroteskFont.variable} ${MontserratFont.variable} ${LatoFont.variable} ${RobotoFont.variable}

is this part required ?

2023-10-01T17:15:09.000Z

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

2023-10-01T17:18:42.000Z

is it already montserrat ?

lmao

i think it works ?

2023-10-01T17:27:33.000Z

Congrats, my internet was gone

Ejayz || PiggyDevOP

2023-10-01T17:28:52.000Z

lol

good thing you are being welcome backed

2023-10-01T17:42:36.000Z

@risky I did not help 15, but 1 is not bad too IG.

Ejayz || PiggyDevOP

2023-10-01T17:45:29.000Z

hahah now we are even with my question last time

2023-10-01T17:46:34.000Z

https://tenor.com/view/tobey-maguire-peter-parker-sandman-spiderman3-i-forgive-you-gif-23309359

2023-10-02T00:00:40.000Z

At the same time, 89 is alot too..