Verificador de estratégia de carregamento de fontes

• Análise instantânea de carregamento de fontes: analise estratégias de exibição de fontes em tempo real - troca, fallback, opcional e bloqueio. Nosso verificador de estratégia de carregamento de fontes compara todos os quatro valores de exibição de fontes CSS com o tamanho do arquivo da sua fonte e o tempo de carregamento estimado, mostrando o tempo exato de visibilidade do texto e o impacto do CLS para cada estratégia instantaneamente.
• Análise privada - sem upload de servidor: todas as análises de estratégia de carregamento de fontes são executadas inteiramente em seu navegador. Os nomes, tamanhos e configurações das fontes nunca saem do seu dispositivo. O verificador de estratégia de carregamento de fontes usa um modelo matemático para estimar o impacto do CLS e renderizar o tempo com total privacidade.
• Otimização do Core Web Vitals: A estratégia de carregamento de fontes impacta diretamente o Largest Contentful Paint (LCP) e a Cumulative Layout Shift (CLS). Nosso verificador de estratégia de carregamento de fontes ajuda você a escolher o valor ideal de exibição da fonte - substituto para corpo de texto, troca para títulos ou opcional para fontes decorativas - para maximizar sua pontuação no Lighthouse.
• Linha do tempo visual e estimativa de CLS: veja uma linha do tempo visual codificada por cores de cada estratégia de exibição de fonte, mostrando exatamente quando o texto se torna visível, quando a fonte é carregada e quando ocorre qualquer troca. O verificador de estratégia de carregamento de fontes fornece uma estimativa clara de contribuição do CLS (nenhuma/baixa/moderada/alta) com uma explicação do motivo.

• Otimização de desempenho de Next.js e React: Os desenvolvedores de React e Next.js usam o verificador de estratégia de carregamento de fontes para otimizar declarações @font-face para renderização no lado do servidor (SSR). Escolha o valor correto de exibição da fonte para evitar mudanças de layout durante a hidratação e, ao mesmo tempo, garantir que as fontes personalizadas sejam renderizadas corretamente. O CSS gerado funciona com next/font, componentes estilizados e módulos CSS.
• Conformidade com Core Web Vitals: Os engenheiros de desempenho da Web usam o verificador de estratégia de carregamento de fontes para reduzir CLS (Cumulative Layout Shift) de trocas de fontes. Ao analisar a compensação entre font-display: swap (texto rápido, mas CLS) e font-display: opcional (sem CLS, mas sem fonte personalizada em conexões lentas), as equipes podem atingir seus objetivos do Lighthouse CLS sem sacrificar a tipografia.
• Otimização de conexão móvel e lenta: em conexões 3G com RTT de 300 a 500 ms, arquivos de fonte com mais de 50 KB podem levar de 3 a 5 segundos para carregar. O verificador de estratégia de carregamento de fontes ajuda os desenvolvedores móveis a decidir entre font-display: fallback (texto visível a 100 ms com troca potencial) e font-display: opcional (sem troca, CLS inferior) para diferentes tamanhos de tela e tipos de conexão.
• Desenvolvimento de temas WordPress e CMS: os desenvolvedores de temas usam o verificador de estratégia de carregamento de fontes para gerar CSS @font-face ideal para WordPress, Shopify e outras plataformas CMS. A ferramenta produz CSS pronto para uso que pode ser colado diretamente em style.css ou na configuração de carregamento de fonte de um tema personalizado, garantindo renderização de fonte consistente em todas as páginas.
• Fontes do sistema de design e da biblioteca de componentes: os mantenedores do sistema de design usam o verificador de estratégia de carregamento de fontes para estabelecer estratégias padrão de exibição de fontes para diferentes tipos de componentes: opcional para fontes de ícones e elementos decorativos, substituto para componentes de corpo de texto e troca para tipografia crítica da marca. O CSS gerado inclui suporte ao intervalo Unicode para carregamento eficiente de subconjuntos.
• Melhoria de pontuação do Lighthouse e PageSpeed ​​​​Insights: profissionais de marketing digital e especialistas em SEO usam o verificador de estratégia de carregamento de fontes para diagnosticar e corrigir problemas de desempenho relacionados a fontes sinalizados pelas auditorias do Lighthouse. A ferramenta explica por que font-display: block causa avisos “Garanta que o texto permaneça visível durante o carregamento da fonte da web” e fornece a correção CSS exata para eliminar essa falha comum do Lighthouse.

O descritor CSS font-display, definido na especificação CSS Fonts Module Level 4, controla como uma fonte da web é renderizada durante o carregamento. Ele determina o período de bloqueio (quanto tempo o navegador oculta o texto enquanto espera pela fonte), o período de troca (quanto tempo o navegador mostra uma fonte substituta antes da troca) e o período de falha (o que acontece se a fonte nunca carregar). A escolha do valor de exibição de fonte errado afeta diretamente o Cumulative Layout Shift (CLS) e o Largest Contentful Paint (LCP) - duas das métricas Core Web Vitals do Google. Nosso verificador de estratégia de carregamento de fontes ajuda você a escolher o valor ideal para cada fonte em sua página.

1. Insira os detalhes da fonte: forneça o nome da família da fonte, o tamanho estimado do arquivo (KB) e o tempo estimado de carregamento (ms). Escolha entre predefinições rápidas para cenários comuns, como corpo de texto (30 KB), títulos (50 KB) ou fontes CJK grandes (500 KB). O verificador de estratégia de carregamento de fontes usa essas entradas para modelar um comportamento de carregamento realista.
2. Compare todas as estratégias lado a lado: a ferramenta analisa todos os cinco valores de exibição de fonte CSS - auto, block, swap, fallback e opcional - e apresenta uma grade de comparação mostrando métricas de tempo, classificações CLS e cronogramas visuais para cada um. Uma estratégia recomendada é destacada com base no tamanho da fonte e no perfil de carregamento.
3. Revise e copie o CSS recomendado: clique em qualquer cartão de estratégia para obter uma visualização detalhada com uma linha do tempo interativa das fases de bloqueio, fallback e troca. O CSS @font-face gerado com o valor font-display escolhido está pronto para ser copiado e colado em suas folhas de estilo.

• Bloquear: O navegador oculta o texto por até 3 segundos enquanto a fonte carrega (FOIT - Flash of Invisible Text). Se a fonte carregar em 3 segundos, o texto aparecerá no tipo de letra correto, sem mudança de layout. Se a fonte não carregar, o texto aparecerá em uma fonte substituta. Melhor para títulos de heróis onde a consistência visual é mais importante do que a renderização rápida.
• Troca: o texto é renderizado imediatamente em uma fonte substituta e, em seguida, troca para a fonte personalizada quando é carregado (FOUT - Flash de texto sem estilo). Isso proporciona o melhor tempo de Primeira Pintura, mas causa mudança de layout quando as fontes são trocadas. Melhor para textos críticos para a marca, onde mostrar o tipo de letra correto é essencial.
• Fallback: Um compromisso - um curto período de bloqueio (~100 ms) permite que as fontes em cache sejam carregadas sem flash de troca e, em seguida, retornem à fonte do sistema. A fonte só é trocada se for carregada em aproximadamente 3 segundos. Melhor para corpo de texto onde você deseja renderização rápida com tipografia personalizada ocasional.
• Opcional: Um período de bloqueio muito curto (~100ms), então a fonte é considerada opcional. Se carregar a tempo (por exemplo, do cache), ele será renderizado; caso contrário, o substituto persistirá. A fonte nunca é trocada em conexões lentas. Melhor para fontes decorativas e não críticas.
• Auto: O navegador escolhe a estratégia. Na maioria dos navegadores modernos, o padrão é um comportamento semelhante a "bloquear". Evite automático quando precisar de um comportamento previsível de renderização de fonte.

Quando ocorre uma troca de fonte, o layout pode mudar porque as métricas da fonte personalizada (altura da tampa, altura x, proporções ascendentes/descendentes, larguras de avanço e caixas delimitadoras de glifo) diferem da fonte substituta. A contribuição CLS de uma troca de fonte depende: da diferença de métricas entre a fonte personalizada e substituta (normalmente maior para fontes de exibição/título e menor para fontes de corpo), o comprimento do texto afetado (os títulos mudam mais do que palavras únicas) e o número de elementos que usam a fonte. Pré-carregar a fonte com , usar font-display: opcional ou size-adjust e ascent-override na declaração @font-face pode atenuar essas mudanças. Nosso verificador de estratégia de carregamento de fontes estima a contribuição do CLS para cada estratégia com base no tamanho da fonte e nas características de carregamento.