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

how to use google font in next js

Sakar Hamasaeed answered on April 3, 2022 Popularity 10/10 Helpfulness 7/10

answer how to use google font in next js

related next.js how to add google fonts

how to use google font in next js

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}>
      <Component {...pageProps} />
    </main>
  )
}

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: nextjs.org

Tags: javascript next

Link to this answer
Share Copy Link

Contributed on Nov 20 2022

Sakar Hamasaeed

0 Answers Avg Quality 2/10

Closely Related Answers

next.js how to add google fonts

Comment

// Next.js - Add Google Web Fonts
// Create pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        {/* Google  Web Fonts (Outfit) */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;400;500;600;700;800&display=swap" rel="stylesheet" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: nextjs.org

Tags: add

Link to this answer
Share Copy Link

Contributed on Apr 03 2022

KostasX

0 Answers Avg Quality 2/10

how to use google font in next js

Contents

More Related Answers

how to use google font in next js

Closely Related Answers

next.js how to add google fonts

Grepper

Documentation

Social

Legal

Contact

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