IMPOTAR FONTES DO GOOGLE | Next.js Full stack: arquitetura de componentes Front-end

Olá, Shelton!

Para importar fontes do Google no seu projeto Next.js, você não precisa adicionar nenhuma biblioteca específica. Você pode fazer isso de duas maneiras principais:

Adicionando um link no arquivo _document.js: No Next.js, você pode criar um arquivo customizado chamado _document.js na pasta 'pages'. Este arquivo é usado para alterar o documento HTML padrão. Aqui, você pode adicionar o link para a fonte do Google. Por exemplo:

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Neste exemplo, a fonte 'Open Sans' do Google Fonts está sendo importada.

2 Importando a fonte no CSS: Você também pode importar a fonte diretamente no seu arquivo CSS. Por exemplo:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

Aqui, a fonte 'Open Sans' está sendo importada e aplicada ao corpo do documento.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação