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

custom font nextjs

Cheerful Camel answered on February 3, 2022 Popularity 10/10 Helpfulness 4/10

answer custom font nextjs

related adding font in nextjs

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 javascript

Link to this answer
Share Copy Link

Contributed on Jan 29 2023

Cheerful Camel

0 Answers Avg Quality 2/10

Closely Related Answers

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

custom font nextjs

Contents

More Related Answers

custom font nextjs

Closely Related Answers

adding font in nextjs

Grepper

Documentation

Social

Legal

Contact

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