O que são webfonts e por que usá-las?
Uma webfont é um arquivo de fonte que seu site envia para o navegador do visitante. Assim, seu texto aparece do jeito que você planejou, mesmo que o visitante nunca tenha instalado essa fonte.
Como as webfonts funcionam
Quando alguém abre sua página, o navegador lê seu CSS, vê qual fonte é necessária e baixa o arquivo do seu servidor. Depois, ele desenha seu texto com essa fonte. Tudo isso acontece automaticamente, e o visitante não precisa instalar nada.
Webfonts ou fontes do sistema?
As fontes do sistema já estão no dispositivo do visitante, como Arial, Georgia ou San Francisco. Elas não precisam de download, por isso são a opção mais rápida. A desvantagem é que a aparência muda de um dispositivo para outro, e poucas combinam com a sua marca.
- Escolha uma webfont quando sua marca, seus títulos ou seu design dependem de um tipo de letra específico.
- Escolha fontes do sistema quando a velocidade for prioridade, como em painéis ou ferramentas internas.
- Combine as duas usando uma webfont nos títulos e uma fonte do sistema no texto corrido.
Quanto as webfonts custam em velocidade?
Cada arquivo de fonte é mais um download, e o texto pode aparecer atrasado ou saltar enquanto o arquivo chega. Uma webfont bem preparada mantém esse custo baixo. Use WOFF2, remova os caracteres que você não usa e carregue apenas os pesos que de fato aplica. Nosso guia sobre como fazer webfonts carregarem mais rápido cobre cada etapa.
Hospedagem própria ou serviço de fontes?
Serviços como Google Fonts e Adobe Fonts hospedam os arquivos para você. Hospedar por conta própria significa mantê-los no seu servidor. Isso dá controle sobre cache e velocidade, e faz com que o navegador dos visitantes não se conecte a terceiros. Isso pode ser importante para a privacidade: em 2022, um tribunal alemão decidiu contra um site que carregava o Google Fonts dos servidores do Google sem consentimento.
Antes de hospedar por conta própria, leia a licença da fonte. Nosso guia de licenciamento de webfonts explica o que observar.
Primeiros passos
Escolha uma fonte que você tenha licença para usar e processe-a no Webfont Generator. Você receberá arquivos prontos para a web e o CSS, e nosso guia mostra como adicioná-los ao seu site.
