Importação de fonte de forma otimizada no NEXT JS 13 🔤🔥

Recentemente estive atualizando um projeto do trabalho e então descobri que com o nextjs 13 há uma nova forma de importar e usar uma fonte, resolvi escrever esse artigo e buscar informações complementares para ficar mais completo, confira a fonte original no fim do artigo.

O Nextjs 13 agora introduz a otimização de fonte automaticamente usando o pacote next/font.

Vantagens

1. Não há necessidade de importar fontes da Google com um link CDN.;
2. Menos código e limpo;
3. Otimiza automaticamente a fonte para produção;
4. Remove as solicitações de rede externa das fontes da Google.

Obs: O post original fala para baixar o pacote @next/font, mas pelo que pesquisei esse pacote deixará de ser usado no next 14, e assim é recomendado que use diretamente de next/font

Importando sua fonte

Primeiro, selecione uma fonte da Google Fonts e depois importe-a com o mesmo nome.

import {Poppins} from "next/font/google"

Configurando as propriedades da fonte

Cada fonte vem com muitas propriedades como weight, style, subsets, variable etc. Você pode usar a configuração padrão ou alterar algumas dessas propriedades, da seguinte forma:

import { Poppins} from '@next/font/google'

// Configura a fonte para usar as propriedades padrões
const poppins = Poppins()

ou

// Altera as propriedades
const poppins = Poppins({
   weight: '400',
})

Você pode ler mais sobre as propriedades da fonte em font function arguments na documentação do next.

Como aplicar?

Depois de importar e configurar, basta apenas passar o classname da fonte no elemento.

import { Poppins} from '@next/font/google'
const poppins = Poppins({ subsets: ['latin'] })
export default function Home() {
return (<h1 className={poppins.className}> Home page </h1> );
}

Para aplicar no app todo coloque o className englobando seu <Component {...pageProps} /> em seu _app.tsx

<main className={poppins.className}>                            
    <Component {...pageProps} />
</main>

Como importar fontes de duas ou mais palavras?

Basta apenas colocar um _ para cada espaço em branco.

import { Island_Moments } from '@next/font/google'
// configuração da fonte
const IslandMoments= Island_Moments({
weight:'400',
subsets:['latin']
})
// uso
<p className={IslandMoments.className}> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>

Como usar com fontes locais?

import localFont from '@next/font/local'
// configuração da fonte
const openSansExtraBold = localFont({
 src: '../asset/OpenSans/OpenSans-ExtraBoldItalic.ttf' 
})
// uso 
<h1 className={openSansExtraBold.className}> Blog post 1 </h1>