Queria saber como coloco essa fonte de forma Global, tenho que toda hora ficar colocando ela nos arquivos .tsx

rafaelnogueirahá 2 anos

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);
}
willdeschepperhá 2 anos
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!
rafaelnogueirahá 2 anos
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.
willdeschepperhá 2 anos
ahhhhh entendi! ai só passar a classe dela? Nossa ai sim! VLWWW
willdeschepperhá 2 anos
Consegui! O Nextjs tb atualizou a documentação, estou usando tailwind e passei assim: ```javascript //tailwind.config.js fontFamily: { lato: ['var(--lato-font)'], roboto: ['var(--roboto-font)'], } ``` ficou perfeito!