Otimizador de tamanho de entrega de fontes web

• Análise instantânea da entrega de fontes web: Analise declarações CSS @font-face na hora no seu navegador, sem upload a servidor e sem processamento na nuvem. Nosso otimizador detecta em tempo real WOFF2 ausente, formatos legados e problemas de font-display.
• Otimizador de entrega de fontes web online e seguro: Seu código CSS nunca sai do seu dispositivo ao ser analisado. Processamento 100% no lado do cliente significa privacidade total: sem armazenamento na nuvem, sem logs de servidor e sem exposição das URLs de fontes.
• Otimizador de entrega de fontes web sem instalação: Analise e otimize declarações @font-face direto no navegador, sem downloads de software, plugins e conta. Funciona em qualquer navegador moderno e sistema operacional.
• Saída CSS otimizada com um clique: O otimizador gera um bloco CSS @font-face limpo: formatos EOT e SVG removidos, font-display adicionado, fallbacks local() incluídos, pronto para copiar ou baixar como arquivo .css.

• Otimização de fontes para Core Web Vitals: Analise declarações @font-face para corrigir problemas de LCP e CLS ligados a fontes. A falta de font-display: swap causa texto invisível (FOIT) que atrasa o LCP; o otimizador detecta e corrige isso automaticamente.
• Modernização de pilhas de fontes legadas: Modernize pilhas @font-face antigas com formatos EOT, SVG e TTF. O otimizador remove os formatos obsoletos, garante que WOFF2 seja o primeiro da lista src e gera um CSS moderno e limpo.
• Auditoria de fontes de design system: Audite as declarações @font-face do seu design system ou biblioteca de componentes. O otimizador identifica WOFF2 ausente, valores inconsistentes de font-display e oportunidades de migrar para fontes variáveis.
• Auto-hospedagem de fontes compatível com GDPR: Detecte URLs do CDN do Google Fonts em declarações @font-face que podem violar o GDPR ao enviar IPs de usuários ao Google. O otimizador sinaliza e recomenda alternativas auto-hospedadas.
• Entrega de fontes multilíngue: Analise declarações unicode-range para pilhas de fontes multilíngues. O otimizador detecta falta de propriedades unicode-range que fazem todos os subconjuntos de fonte serem baixados mesmo em páginas de um só idioma.
• Planejamento de migração para fontes variáveis: Identifique famílias com 4 ou mais declarações de peso que se beneficiariam de uma fonte variável. O otimizador as sinaliza e recomenda a abordagem de fonte variável para reduzir requisições HTTP.

Otimização da entrega de fontes web é o processo de configurar declarações CSS @font-face para minimizar o tamanho de download das fontes, reduzir requisições HTTP e evitar o bloqueio de renderização. Os fatores-chave são: escolha de formato (WOFF2 é 30-50% menor que WOFF), font-display (evita texto invisível durante o carregamento), unicode-range (permite subsetting por escrita) e fallback local() (usa fontes do sistema quando disponíveis). Nosso otimizador de tamanho de entrega de fontes web analisa seu CSS @font-face, detecta todos esses problemas e gera um CSS otimizado.

1. 1 Cole seu CSS @font-face: Cole qualquer CSS com declarações @font-face, da sua folha de estilos, de um embed do Google Fonts ou de um provedor de fontes. Toda a análise acontece localmente no navegador: seu CSS e as URLs das fontes nunca saem do seu dispositivo.
2. 2 Clique em «Analisar entrega de fontes»: O otimizador analisa cada bloco @font-face e extrai font-family, font-weight, font-style, font-display, unicode-range e todas as entradas src. Ele detecta WOFF2 ausente, formatos legados (EOT, SVG), falta de font-display e problemas de GDPR.
3. 3 Revise as recomendações e baixe o CSS otimizado: Os resultados mostram etiquetas de formato por declaração, recomendações de otimização com correções e um CSS limpo (EOT/SVG removidos, font-display adicionado, fallbacks local() incluídos) pronto para copiar ou baixar.

• Formato WOFF2: O WOFF2 usa compressão Brotli e é 30-50% menor que o WOFF. É suportado por todos os navegadores modernos (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Use sempre WOFF2 como primeira entrada src.
• Propriedade font-display: Controla como o navegador trata o carregamento de fontes. swap mostra o texto de fallback imediatamente (melhor para texto corrido); optional só usa a fonte se ela carregar em 100 ms (melhor para fontes não críticas).
• Formatos legados (EOT, SVG): O EOT só é necessário para IE8 e anteriores (menos de 0,1% de participação). As fontes SVG estão obsoletas. Removê-los reduz a complexidade do CSS e elimina requisições HTTP desnecessárias em navegadores antigos.
• unicode-range: Permite o subsetting de fontes por escrita: o navegador baixa o arquivo apenas das escritas realmente usadas na página. Essencial para sites multilíngues com famílias CJK grandes ou multi-escrita.

O otimizador de tamanho de entrega de fontes web analisa apenas declarações CSS: ele não baixa nem mede o tamanho real dos arquivos de fonte. Os tamanhos estimados se baseiam em valores típicos de cada formato (WOFF2 ~18 KB, WOFF ~28 KB, TTF ~45 KB para um subconjunto latino). Os tamanhos reais dependem do número de glifos, dos recursos OpenType e do subsetting. O otimizador não consegue detectar se os arquivos WOFF2 estão realmente disponíveis nas URLs indicadas: verifique as URLs na aba Rede do seu navegador.