Como Fazer a Instalação de Fontes Customizadas?

Neste tutorial, vamos aprender a instalar e utilizar fontes personalizadas em um aplicativo React Native com Expo.

Obtendo as Fontes

Passos para baixar as fontes:

• Acessar o Google Fonts (fonts.google.com)
• Escolher a fonte desejada (no exemplo usamos Poppins)
• Fazer download do arquivo .ttf
• Extrair os arquivos na pasta assets/fontes do projeto

Instalação do Pacote Necessário

Para gerenciar as fontes, instalamos:

É recomendado usar expo install ao invés de npm install para garantir compatibilidade com a versão do Expo.

Configurando o Carregamento das Fontes

No arquivo _layout.tsx (ponto de entrada do app):

1. Importar o hook useFonts do expo-font
2. Configurar o carregamento das fontes usando require
3. Controlar a exibição da splash screen durante o carregamento

1const [fontsLoaded] = useFonts({ 'Poppins-Black': require('../assets/fontes/poppins/Poppins-Black.ttf')});

Usando as Fontes no Projeto

Para aplicar a fonte em um componente Text:

1<Text style={{ fontFamily: 'Poppins-Black' }}> Hello from home </Text>

Recomenda-se criar um enum para gerenciar os nomes das fontes:

1enum Fonts { POPPINS_BLACK = 'Poppins-Black' }

Considerações Finais

Instalar fontes customizadas no Expo é um processo simples que permite personalizar completamente o visual do seu aplicativo. As principais vantagens são:

• Consistência visual com a identidade da marca
• Melhor experiência do usuário com tipografia adequada
• Processo de carregamento otimizado pelo Expo

Lembre-se de testar as fontes em diferentes dispositivos e tamanhos de tela para garantir a melhor legibilidade.