Executando verificação de segurança...
1
Carregando publicação patrocinada...
1
1
1
rafaelnogueira

Opa e ae, então na doc deles já tem uma instrução legal sobre e ode ver a parte de exemplos no github da Vercel: https://nextjs.org/docs/basic-features/font-optimization

Também pode dar uma olhada nesse artigo: https://upmostly.com/next-js/how-to-add-google-fonts-to-your-next-js-app

Apesar de eles adicionarem direto nos elemtnos html aí, eu coloquei nos estilos mesmo. No meu caso estou usando Styled-components e arquivos .ts para criar os estilos.
Ficou algo mais ou menos assim:

const roboto = Roboto({
    weight: ['400', '500'],
    subsets: ['latin'],
});

{
    font-family: `${roboto.style.fontFamily}, sans-serif`,
}
1
1
rafaelnogueira

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
willdeschepper

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
rafaelnogueira

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
0
willdeschepper

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!