A fonte do seu site custa mais caro do que parece

Uma cliente me mandou um e-mail em pânico. A empresa de fontes tinha detectado o site dela e cobrado uma diferença de licença: mais de 4 mil reais, porque o tráfego passou do limite contratado três anos antes. Ninguém no time sabia que existia limite. A fonte do site tinha virado uma conta a pagar.

Isso acontece mais do que você imagina. A fonte do site é uma daquelas decisões que parecem puramente estéticas, tomadas em cinco minutos por alguém no Figma, e que depois cobram juros em três frentes: dinheiro, velocidade e identidade. Vou destrinchar as três.

Por que fonte é cobrada por pageview

Fonte é software. Você não compra, você licencia. E as licenças de webfont costumam ser vendidas por faixa de pageviews mensais.

Funciona mais ou menos assim:

• Licença de desktop: usar no Figma, no Illustrator, no PowerPoint. Barato.
• Licença de web: servir no navegador. Cobrada por faixa de tráfego.
• Licença de app: embutir num aplicativo. Cobrada por número de instalações.

O detalhe cruel é que essas licenças são separadas. O designer compra a de desktop, faz o layout lindo, entrega. O dev pega o arquivo e sobe no site. Ninguém comprou a licença de web. Passam dois anos, o site cresce, e chega o e-mail.

Nas fundições grandes, uma família completa com licença web para tráfego médio sai entre 500 e 3 mil dólares. Se você tem site, app e material impresso, multiplique. Para uma empresa que fatura bem, é ruído. Para um SaaS que está começando, é um mês de infra.

Fonte gratuita virou boa de verdade

Dez anos atrás, "fonte gratuita" queria dizer Arial ou algo do Google Fonts que gritava "template". Isso mudou.

O Nebula Sans é um bom exemplo do que existe hoje. É uma família sans-serif gratuita, com licença aberta, e não parece gratuita. Tem a faixa completa de pesos, funciona como fonte variável (um arquivo só cobre do light ao black, sem precisar carregar seis arquivos), e o desenho é neutro o suficiente para interface sem ser sem graça. Suporte a acentuação está lá, o que já elimina metade das opções gringas para quem escreve em português.

Não é a única. Inter, Geist, Public Sans, Instrument Sans, Söhne (essa é paga, mas cito porque muita gente confunde). O ponto é que o argumento "preciso pagar caro para ter uma tipografia decente" morreu.

Fonte cara não deixa o produto bom. Fonte errada deixa o produto lento.

O peso que ninguém mede

Aqui está a parte que os relatórios de performance não contam direito.

Uma família de fonte com quatro pesos, em formato WOFF2, cobrando latin e latin-extended, dá algo entre 60 e 120 KB. Parece nada. Só que fonte bloqueia renderização. O navegador baixa o CSS, descobre que precisa da fonte, pede a fonte, e enquanto ela não chega o texto fica invisível ou pisca trocando de forma. Aquele efeito de "o site carregou e o texto pulou" tem nome: é a fonte chegando atrasada e reflowando o layout.

Isso entra direto no Cumulative Layout Shift, que é uma das métricas que o Google usa para ranquear. E entra na percepção do usuário, que é a métrica que importa mais.

Três coisas que resolvem quase tudo:

1. Hospede a fonte no seu domínio. Carregar do Google Fonts adiciona uma conexão a outro servidor. Desde que os navegadores separaram o cache por site, aquele argumento de "o usuário já tem em cache de outro site" não vale mais nada.
2. Use fonte variável. Um arquivo no lugar de quatro. Menos requisições, menos peso.
3. Configure o fallback direito. font-display: swap mais uma fonte de sistema com métricas parecidas. O texto aparece na hora, e a troca é quase imperceptível.

Fiz isso num site de e-commerce ano passado. Saímos de três arquivos de fonte carregados de um CDN externo para um arquivo variável local. O Largest Contentful Paint caiu de 2,8s para 1,6s. Só a fonte. Nenhuma outra mudança.

A parte que realmente importa: o site parece seu?

Agora a parte chata de admitir. Se você usa a mesma fonte gratuita que todo mundo usa, seu site vai parecer com o de todo mundo.

Existe uma estética de SaaS que já virou piada interna entre designers. Inter no texto, gradiente roxo, ilustração isométrica, badge de "Novo" com bordinha arredondada. Bonito? É. Memorável? Não. Se eu trocar o logotipo de três desses sites, ninguém percebe.

Tipografia é a coisa mais barata que existe para diferenciar uma marca. Você não precisa de fonte exclusiva desenhada sob medida. Precisa de uma escolha com intenção:

• Uma sans neutra para o corpo do texto, porque legibilidade não é lugar para criatividade.
• Uma fonte com personalidade nos títulos. Pode ser uma serifada, uma display, uma grotesca com detalhes estranhos. É aqui que a marca aparece.
• Escala consistente. Não seis tamanhos aleatórios porque cada tela foi feita num dia diferente.

Essa combinação de duas fontes, uma neutra e uma com opinião, resolve 90% dos casos e custa zero se você escolher bem entre as gratuitas.

Como decidir sem virar projeto de três meses

Se você está montando ou refazendo um produto agora, o caminho curto é esse:

Comece pela leitura. Abra seu texto real, não o "Lorem ipsum", na fonte candidata. Um parágrafo do seu FAQ, uma tabela de preços, uma tela de erro. Se cansa ler, descarta.

Teste os números. Muito SaaS mostra valores, datas, métricas. Fonte com números de largura variável desalinha coluna de tabela. Procure suporte a tabular-nums. É um detalhe de dez segundos que evita um bug visual eterno.

Cheque a acentuação. Escreva "ação", "coração", "não", "português". Já vi fonte gringa premium com til desenhado de qualquer jeito, quase colado na letra.

Leia a licença antes de baixar. Se for SIL Open Font License, você está livre: pode usar em web, app, produto comercial, sem limite de tráfego. Se for licença de fundição, procure a linha de pageviews e compare com o seu Analytics. E guarde o PDF da licença em algum lugar que sua equipe encontre daqui a dois anos.

Decida em uma semana. Sério. Escolha de fonte é daquelas discussões que se estende infinitamente porque todo mundo tem opinião e ninguém tem critério. Defina os critérios acima, teste três opções, escolha, siga em frente. Dá para trocar depois se estiver errado. É uma variável de CSS.

O que eu faria no seu lugar

Se o seu site hoje carrega fonte do Google Fonts, roda com três ou quatro pesos, e ninguém sabe dizer quem escolheu aquela fonte nem por quê, você tem duas horas de trabalho pela frente e um ganho real esperando.

Baixe a fonte, hospede no seu domínio, converta para variável se existir versão, configure o fallback. Depois abra a conversa mais interessante: essa fonte diz alguma coisa sobre o que sua empresa é? Se a resposta for "não sei", você acabou de encontrar a diferença entre um site que funciona e um site que fica na cabeça de quem visitou.

Eu faço esse tipo de ajuste em projeto de cliente com frequência, quase sempre junto com outras coisas de performance e identidade que se acumularam. Se quiser conversar sobre o seu, dá uma olhada no que eu faço.

Uma cliente me mandou um e-mail em pânico: mais de 4 mil reais de cobrança retroativa por causa da fonte do site.

A licença tinha limite de pageviews. O tráfego cresceu, ninguém no time sabia, e a tipografia virou conta a pagar.

Fonte é software. Você não compra, você licencia. E designer comprar a licença de desktop enquanto o dev sobe o arquivo no servidor é a receita clássica desse e-mail chegando dois anos depois.

Só que o dinheiro é a parte menor. Fonte mal carregada bloqueia renderização, empurra o layout e derruba seu Core Web Vitals. Num e-commerce ano passado, troquei três arquivos de CDN externo por um arquivo variável local: LCP caiu de 2,8s para 1,6s. Nenhuma outra mudança.

E tem a pergunta que quase ninguém faz: essa fonte diz alguma coisa sobre o que a sua empresa é? Se a resposta for "não sei", talvez seu site pareça com o de todo mundo.

Escrevi o passo a passo completo no blog, incluindo como ler a licença antes de baixar. Se quiser revisar o seu caso, me chama.

#Tipografia #WebPerformance #DesignDeProduto #CoreWebVitals #Branding