Queria saber como coloco essa fonte de forma Global, tenho que toda hora ficar colocando ela nos arquivos .tsx
Respondendo a "Opa e ae, então na doc deles já tem uma instruç..." dentro da publicação Fonts - NextJs
1
1
Provavelmente vai ter que usar dessa forma css-variables
Importa a fonte no _app e adiciona a classe em uma div envolvendo toda aplicação.
//_app.js
import { Roboto } from '@next/font/google'
const roboto = Roboto({
weight: '400',
variable: '--roboto-font'
})
export default function App({ Component, pageProps }) {
return (
<div className={roboto.className}>
<Component {...pageProps} />
</div>
);
}
/* globals.css */
html, body {
font-family: var(--roboto-font);
}
1
Seria ótimo se o projeto tive-se apenas uma fonte, mas tem duas, ai que complica! Estou pesquisando uma forma de carregar as fontes no arquivo css!
Mas de qualquer forma, muito obrigado!
1
Pode adicionar duas fontes ou quantas fontes quiser, é uma classe css normal :)
No css tu vai adicionar a variável font-family: var(--roboto-font);, é uma variável css padrão.
1
ahhhhh entendi! ai só passar a classe dela? Nossa ai sim! VLWWW
0
Consegui! O Nextjs tb atualizou a documentação, estou usando tailwind e passei assim:
//tailwind.config.js
fontFamily: {
lato: ['var(--lato-font)'],
roboto: ['var(--roboto-font)'],
}
ficou perfeito!