Como Instalar Fontes Diferentes no Aplicativo? | Expo

Neste tutorial completo, vamos aprender a carregar e utilizar fontes personalizadas em um projeto Expo, utilizando o pacote expo-google-fonts para facilitar o processo.

Por que usar fontes customizadas?

As fontes são elementos essenciais para a identidade visual de um aplicativo. Com fontes personalizadas você pode:

• Manter consistência com a identidade da marca
• Melhorar a legibilidade e experiência do usuário
• Criar hierarquia visual entre os elementos de texto

Passo 1: Instalação do Pacote

Primeiro, precisamos instalar o pacote específico da família de fontes que queremos usar. No exemplo usaremos a fonte Inter:

O Expo oferece diversos pacotes de fontes do Google Fonts que podem ser encontrados no npm pesquisando por '@expo-google-fonts'.

Passo 2: Configurando o Carregamento

No arquivo principal do app (normalmente _layout.tsx), precisamos configurar o carregamento das fontes antes da aplicação iniciar:

1import { useFonts, Inter_100Thin, Inter_700Bold } from '@expo-google-fonts/inter';
2import * as SplashScreen from 'expo-splash-screen';
3SplashScreen.preventAutoHideAsync();
4export default function Layout() {
5const [fontsLoaded, fontError] = useFonts({
6'Inter-Thin': Inter_100Thin,
7'Inter-Bold': Inter_700Bold
8});
9useEffect(() => {
10if (fontsLoaded || fontError) {
11SplashScreen.hideAsync();
12}
13}, [fontsLoaded, fontError]);
14if (!fontsLoaded && !fontError) {
15return null;
16}
17return (
18// Seu layout normal aqui
19);
20}

Esta configuração garante que as fontes estejam disponíveis antes da aplicação renderizar qualquer interface.

Passo 3: Usando as Fontes nos Componentes

Para aplicar as fontes em componentes Text:

1<Text style={{ fontFamily: 'Inter-Bold', fontSize: 20 }}> Texto em negrito </Text> <Text style={{ fontFamily: 'Inter-Thin', fontSize: 16 }}> Texto fino </Text>

Dica: Organizando com Enums

Crie um arquivo para gerenciar os nomes das fontes:

1// src/shared/fonts.ts export enum AppFonts { THIN = 'Inter-Thin', BOLD = 'Inter-Bold' }

E use assim:

1import { AppFonts } from '../shared/fonts'; <Text style={{ fontFamily: AppFonts.BOLD }}> Texto organizado </Text>

Tratamento de Erros

É importante lidar com possíveis falhas no carregamento:

1if (fontError) { console.error('Erro ao carregar fontes:', fontError); }

Considerações Finais

Usar fontes personalizadas no Expo com expo-google-fonts oferece várias vantagens:

• Facilidade de implementação: O pacote gerencia todo o processo de download e inclusão das fontes
• Performance otimizada: As fontes são carregadas de forma assíncrona sem bloquear a UI
• Variedade de opções: Acesso a centenas de fontes do Google Fonts
• Atualizações automáticas: As fontes são mantidas atualizadas pelos pacotes

Para projetos que exigem fontes específicas não disponíveis no Google Fonts, o processo é um pouco diferente - tema que abordaremos em um próximo tutorial.

Lembre-se sempre de testar suas fontes em diferentes dispositivos e tamanhos de tela para garantir a melhor legibilidade em todos os cenários.