Breaking News: Grepper is joining You.com. Read the official announcement!

adding font in nextjs

Shirshak Kandel answered on February 3, 2022 Popularity 10/10 Helpfulness 3/10

answer adding font in nextjs

related custom font nextjs

adding font in nextjs

Comment

//at layout.tsx
import type { Metadata } from "next";
import { Montserrat } from "next/font/google";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { auth } from "@/auth";
import { Toaster } from "@/components/ui/sonner";

const montserrat = Montserrat({
  subsets: ["latin"],
  style: ["normal"],
  weight: ["300", "400", "500", "600", "700", "800"],
});
  
export const metadata: Metadata = {
  title: "Kite - Fast, Flexible Funding for Growth",
  description:
    "For businesses in the Middle East and North Africa, Kite offers fast, affordable funding for all SMEs. Accelerate your growth with no-interest, no-equity flexible loans tailored to meet your business needs. Unlock opportunities and propel your success with Kite's seamless financial solutions.",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth();
  return (
    <SessionProvider session={session}>
      <html lang="en">
        <body className={montserrat.className}>
          <Toaster />
          {children}
        </body>
      </html>
    </SessionProvider>
  );
}

Popularity 10/10 Helpfulness 3/10 Language typescript

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Feb 03 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

custom font nextjs

Comment

// npm install @next/font

// pages/_app.js
import { Inter } from '@next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
  		<style jsx global>{`
          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          th,
          tr {
            font-family: ${inter.style.fontFamily}!important;
          }
        `}</style>
      <Component {...pageProps} />
    </main>
  )
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: custom-font cust

Link to this answer
Share Copy Link

Contributed on Jan 29 2023

Cheerful Camel

0 Answers Avg Quality 2/10

adding font in nextjs

Contents

More Related Answers

adding font in nextjs

Closely Related Answers

custom font nextjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.