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

next.js how to add google fonts

KostasX answered on April 3, 2022 Popularity 10/10 Helpfulness 4/10

answer next.js how to add google fonts

related how to use google font in next js

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 google-fonts javascript next.js

Link to this answer
Share Copy Link

Contributed on Apr 03 2022

KostasX

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on Nov 20 2022

Sakar Hamasaeed

0 Answers Avg Quality 2/10

next.js how to add google fonts

Contents

More Related Answers

next.js how to add google fonts

Closely Related Answers

how to use google font in next js

Grepper

Documentation

Social

Legal

Contact

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