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.
- Crie um novo arquivo chamado
fonts.tsdentro da pastaapp/ui; - Importe a fonte
Poppinsdo módulonext/font/google; - Também devemos especificar o
weighte ossubsetsda 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
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can I use multiple font weights or styles with the Poppins font?
How do I add another custom Google font to my project?
What should I do if the font doesn't appear correctly in my app?
Awesome!
Completion rate improved to 2.08Adicionando Fontes Personalizadas do Google
Deslize para mostrar o menu
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.
- Crie um novo arquivo chamado
fonts.tsdentro da pastaapp/ui; - Importe a fonte
Poppinsdo módulonext/font/google; - Também devemos especificar o
weighte ossubsetsda 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
Obrigado pelo seu feedback!
