Como lidar com fontes diferentes em projetos de design e desenvolvimento
A questão das tipo de letras diferentes aparece todo dia em thread de quem trabalha com identidade visual ou front-end. O problema não é escolher uma fonte bonita. É fazer com que ela carregue, renderize e não quebre o layout quando o usuário troca de sistema operacional. No Brasil, vejo muita gente usar Google Fonts sem pensar em subsetting. Dá trabalho desnecessário. Um arquivo de fonte completo pode passar de 1MB. Se você só precisa de números e letras maiúsculas para um cabeçalho, exportar só o necessário reduz para cerca de 40KB. Ferramentas como font-spider ou a opção subset do Google Fonts resolvem isso.
Tipos de formato e quando usar cada um
Existem basicamente três formatos que você vai encontrar no dia a dia: TTF, OTF e WOFF/WOFF2. O TTF é o mais antigo e rodava bem no Windows dos anos 2000. Hoje em dia, o WOFF2 é o padrão para web. Ele compacta melhor e é suportado por todos os navegadores modernos. O OTF traz recursos tipográficos avançados como ligaduras e variantes alternadas, mas nem sempre faz sentido usá-lo em telas pequenas. Um detalhe que pouca gente leva em conta: o tamanho do arquivo da fonte impacta diretamente o Core Web Vitals. Uma fonte mal otimizada pode empurrar o LCP pra cima em alguns segundos. No meu caso, tive um projeto de e-commerce onde o carregamento de uma fonte display em OTF pesado travou a primeira pintura em mobile por cerca de 2 segundos. Mudei para WOFF2 com subsetting e o tempo caiu para menos de 300ms.
Problemas comuns e soluções práticas
O maior erro que vejo é confiar cegamente em famílias completas de fontes. Você acha que precisa de Light, Regular, Medium, SemiBold, Bold, Black. Na prática, 90% dos projetos precisam de apenas duas ou três weights. Carregar oito arquivos de fonte é exagero. O navegador faz download paralelo, sim, mas ainda assim gasta banda e tempo de parsing. Outro problema recorrente é a fallback chain. Quando a fonte customizada falha ao carregar, o texto aparece na fonte padrão do sistema. Se você não definiu fallbacks adequados, o texto pode pular de tamanho e quebrar o layout num FOUC. Sempre declare uma stack de fontes no CSS. Prefira fontes do sistema que tenham características parecidas com a fonte de marca.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Tive um caso específico com tipo de letras diferentes em um projeto de app interno. A equipe usava uma fonte paga com licençaDesktopOnly, mas o app era renderizado via WebView. A fonte não carregava corretamente no Android mais antigo. O workaround foi converter a fonte para WOFF2 e adicionar um fallback para Roboto com o mesmo peso visual. O resultado ficou aceitável e o app voltou a funcionar em todas as versões.
Alternativas às fontes customizadas
Nem sempre a resposta é uma fonte exótica. Fontes do sistema como system-ui, Segoe UI, Roboto e San Francisco são renderizadas de forma otimizada pelo SO. Elas têm kerning ajustado para tela, suportam variação de peso com CSS e não exigem download nenhum. Em muitos dashboards e painéis administrativos, o ganho de performance justifica abdicar da fonte personalizada. Se você precisa mesmo de tipografia fora do comum, considere fontes variáveis. Um único arquivo WOFF2 pode cobrir desde weights ultrafino até black, com interpolação contínua. Isso substitui cinco ou seis arquivos por apenas um. O suporte é amplo desde 2021. A desvantagem é que nem todas as famílias oferecem good variation support, então verifique antes de comprar ou adotar.
Verificação e testes
Antes de entregar um projeto, teste a renderização em pelo menos dois navegadores e dois sistemas operacionais. O que fica bom no Chrome no macOS pode ter comportamento diferente no Firefox no Windows. Use ferramentas como Fontfaceobserver para detectar quando a fonte carregou e aplicar a classe CSS no momento certo. Evita o FOUC sem complicação. Para medir o impacto real, confira o tamanho dos arquivos no DevTools ou no PageSpeed Insights. Se o valor estiver acima de 100KB por fonte, revise o subset. A maioria das fontes que chegam a esse tamanho têm glifos em excesso que o projeto nem usa.
Resumindo: escolha fontes sob medida para o projeto, otimize o formato, use fallbacks apropriados e teste em múltiplos ambientes. Isso evita dor de cabeça depois.
