Guia de extensões de arquivos web e fontes: WOFF2, TTF, OTF e ICO
Ao construir um site ou projetar um produto digital, escolher o formato de arquivo correto para sua tipografia e ícones é crucial tanto para a qualidade visual quanto para a velocidade de carregamento. O uso de um formato de fonte desatualizado pode levar a um texto "invisível" enquanto a fonte é carregada, ou retardar significativamente o desempenho do seu site.
Este guia detalha as extensões essenciais de fontes e gráficos web que você precisa conhecer.
Tabela de Referência Rápida: Formatos de Fontes e Web
| Extensão | Nome Completo | Compressão | Uso Primário |
|---|---|---|---|
.woff2 |
Web Open Font Format 2.0 | Muito Alta | Web Moderna (Melhor desempenho) |
.woff |
Web Open Font Format 1.0 | Alta | Web (Suporte a navegadores legados) |
.ttf |
TrueType Font | Baixa | Desktop Windows/macOS, Web Básica |
.otf |
OpenType Font | Baixa | Design Gráfico, Tipografia Avançada |
.svg |
Scalable Vector Graphics | Varia | Ícones Web, Logotipos, Arte Vetorial |
.ico |
Icon | Nenhuma | Favicons (Ícones de abas do navegador) |
1. O Padrão da Web Moderna (.woff2)
O WOFF2 é o padrão ouro para tipografia web hoje. Ele usa um algoritmo de compressão avançado (Brotli) para tornar os arquivos de fonte até 30% menores que o WOFF original.
- Prós: Tempos de carregamento mais rápidos, suportado por todos os navegadores modernos.
- Por que usar? Se você se preocupa apenas com navegadores modernos (Chrome, Firefox, Safari, Edge),
.woff2é o único formato que você precisa incluir no seu@font-facedo CSS.
2. Suporte Legado (.woff)
O predecessor do WOFF2. Embora ainda seja amplamente suportado, não é tão eficiente.
- Por que usar? Use-o como um fallback se precisar suportar navegadores um pouco mais antigos que ainda não entendem o WOFF2.
3. Padrões de Desktop e Design (.ttf, .otf)
Estes são os formatos que você instala no seu computador para usar no Word, Photoshop ou Figma.
- TTF (TrueType): Desenvolvido pela Apple e Microsoft na década de 1980. É o formato mais comum para uso geral.
- OTF (OpenType): Construído sobre o TTF, mas suporta "recursos OpenType" avançados, como ligaduras, pequenas maiúsculas e glifos alternativos. Os designers preferem OTF para trabalhos impressos e digitais de alto nível.
- Uso na Web: Embora você possa usá-los na web, eles não são compactados e são pesados. É melhor convertê-los para WOFF2 primeiro.
4. Gráficos Vetoriais Escalonáveis (.svg)
Ao contrário das fontes, que são coleções de caracteres, o SVG é um formato de imagem vetorial.
- Logotipos e Ícones: SVGs são perfeitos para logotipos porque nunca ficam borrados, não importa o quanto você aumente o zoom.
- No CSS: Você pode usar SVGs como imagens de fundo ou até mesmo como "Fontes SVG" (embora este último esteja agora praticamente obsoleto em favor do WOFF2).
5. O Favicon (.ico)
O formato .ico é um contêiner especializado que pode conter várias versões de um ícone em tamanhos diferentes (16x16, 32x32, 48x48) em um único arquivo.
- Uso Primário: O "favicon" que você vê nas abas do navegador.
- Alternativa moderna: A maioria dos navegadores modernos agora suporta PNG ou SVG para favicons, mas o
.icocontinua sendo o fallback mais compatível.
Melhores Práticas para Tipografia Web
- Priorize o WOFF2: Sempre liste o
.woff2primeiro no seu CSS para garantir que os navegadores modernos obtenham o menor arquivo. - Subconjunto de Fontes: Muitos arquivos de fonte contêm caracteres para centenas de idiomas que você não usa. Fazer o "subsetting" de uma fonte remove os caracteres não utilizados, reduzindo ainda mais o tamanho do arquivo.
- Use
font-display: swap: Isso garante que o texto fique visível usando uma fonte do sistema imediatamente, mudando para a fonte personalizada assim que ela terminar de carregar.
Perguntas Comuns (FAQ)
P: Posso converter .ttf para .woff2 online?
R: Sim! Existem muitas ferramentas gratuitas que pegam seus arquivos desktop .ttf ou .otf e os compactam em arquivos .woff2 prontos para a web.
P: O WOFF2 suporta todos os recursos do OTF?
R: Sim. O WOFF2 é essencialmente um arquivo OTF ou TTF envolto em uma camada de compressão muito eficiente. Ele preserva todos os recursos tipográficos (como ligaduras) do arquivo original.
P: Devo usar SVG para os ícones do meu site?
R: Geralmente, sim. SVGs são nítidos, suportam transparência e podem ser estilizados com CSS. Para conjuntos de ícones complexos, alguns desenvolvedores preferem "Icon Fonts" (usando um arquivo .woff2), mas o SVG inline é considerado a melhor prática moderna.
Ferramentas Relacionadas no Tool3M
- Conversor de Unidades: Calcule tamanhos de fonte entre Pixels, EM e REM.
- Imagem para Base64: Incorpore pequenos ícones SVG diretamente no seu CSS ou HTML.