E se eu quiser importar fontes? Tem que adicionar alguma biblioteca?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
E se eu quiser importar fontes? Tem que adicionar alguma biblioteca?
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:
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!