Se você possui um blog ou site, já deve ter se deparando com a mensagem de erro "Garanta que o texto continue visível durante o carregamento a webfont".
Esse problema será encontrado quando você analisar a velocidade das páginas do seu site no PageSpeed Insights ou então em outras plataformas que desempenham essa mesma função.
Uma prática recomendada, para garantir que o texto seja visto por todos, é usar o recurso font-display swap.
Passo 01: Faça um backup do template do seu. Por exemplo no blogger, basta ir até opção tema e clicar na setinha que aparece do lado da opção personalizar. Clicando nessa setinha vai aparecer várias opções, escolha primeiro a opção fazer backup.
Passo 02: Agora você clicar em editar html e dentro dele, você vai procurar pelos arquivos css. Para pesquisar por ele é fácil basta pressionar as teclas control+F (juntas) do computador que vai abrir uma barrinha de pesquisa conhecida por search.
Dentro da barrinha de pesquisa digite o comando ".css". Assim você vai encontrar o css que está causando problema de carregamento na webfont do teu site.
Exemplo de arquivo css com problema de carregamento na webfont:
Exemplo da webfont com problema de carregamento:
Se o problema de carregamento da webfont não for tratado, os textos do site podem ficar invisíveis.
Passo 3: desative o css, que apresenta o problema de carregamento, colocando ele dentro do camando <!-- código css -->. Veja a imagem que mostra como desativar um css.
Depois das definições de variable adicione o código css abaixo:
@font-face {
font-family: 'Adicione o nome da font family da web font ';
font-style: normal;
font-weight: 400;
src: local('coloque a qui o nome do local da web font sem traço'), local('coloque aqui o nome do local da webfont com traço'),
url(Coloque aqui a url da webfont que está apresentando problema de carregamento)
format('woff2');
font-display: swap;}Saiba mais sobre font-display
Exemplo de solução de problema no carregamento da webfont depois de adicionar o recurso font-display swap:
A vídeo aula a seguir explica o passo a passo: como definir corretamente o font-display swap.
(Gostou do conteúdo? É só me seguir no you tube para mais novidades)