Adicionando Fontes Personalizadas do Google

Vamos direcionar nossa atenção para as fontes que serão utilizadas no aplicativo.

As fontes do aplicativo são otimizadas automaticamente quando utilizamos o módulo next/font com o Next.js. Os arquivos de fonte são baixados durante o build e hospedados junto com seus outros ativos estáticos. Como resultado, quando um usuário acessa seu aplicativo, não há requisições de rede adicionais para fontes, o que contribui para a melhoria do desempenho.

De volta ao projeto

Vamos adicionar a fonte personalizada Poppins do Google para nosso aplicativo.

1. Crie um novo arquivo chamado fonts.ts dentro da pasta app/ui;
2. Importe a fonte Poppins do módulo next/font/google;
3. Também devemos especificar o weight e os subsets da fonte.

Estamos prontos para usar a fonte Poppins no aplicativo. Vamos aplicá-la ao elemento body no arquivo app/layout.tsx.

Como resultado, todo o aplicativo utiliza a fonte Poppins.

No próximo capítulo, vamos incluir fontes adicionais.

Na Prática