Como corrigir o erro de carregamento de fontes no WordPress

E quando as fontes web demoram a baixar e o navegador segura o texto até a fonte chegar. Sem font-display: swap, isso causa o flash of invisible text (texto invisivel por um instante), e com fontes externas a conexão extra atrasa ainda mais a primeira pintura e piora o LCP.

FOIT (flash of invisible text) e quando o navegador esconde o texto até a fonte carregar, deixando espaco em branco. FOUT (flash of unstyled text) e quando o texto aparece de imediato numa fonte de fallback e depois troca pela definitiva. Com font-display: swap você troca o FOIT pelo FOUT, que e bem melhor para o usuário.

Ele instrui o navegador a mostrar o texto na hora com uma fonte do sistema e substituir pela fonte personalizada assim que ela carregar. Assim o usuário nunca fica olhando uma tela com espaco vazio no lugar do texto, e a percepcao de velocidade da página melhora.

Sim, na maioria dos casos. Servir a fonte do seu próprio domínio elimina a conexão DNS e TLS extra com o servidor do Google e permite que a fonte aproveite o cache e o CDN do site. Também ajuda na privacidade, já que o navegador deixa de chamar um domínio externo a cada visita.

Porque o preload tira a fonte do fim da fila e a coloca em prioridade no inicio do carregamento. Se você der preload em fontes demais, elas concorrem com recursos criticos e o efeito se perde. O ideal e fazer preload apenas da fonte usada acima da dobra, que e a que o usuário ve primeiro.

O woff2 e o formato mais leve e mais bem suportado pelos navegadores atuais. Ele e bem menor que ttf e woff, entao baixa mais rápido. Sempre que possível, sirva suas fontes em woff2 e remova os formatos antigos que o tema carregue sem necessidade.

Ajuda bastante. Cada familia e cada peso e um arquivo separado para baixar. Limitar o site a uma ou duas familias e poucos pesos diminui o número de requisicoes que concorrem com o render, reduz o peso total da página e ainda deixa o layout mais consistente.

Ele resolve boa parte: aplica font-display: swap ao otimizar o CSS e oferece um campo para preload de fontes. Mas a auto-hospedagem do Google Fonts, a escolha do woff2 e a reducao de familias dependem de configuração. O caminho mais rápido e combinar os recursos do WP Rocket com esses ajustes e medir no PageSpeed.