3

Estou utilizando uma fonte que está no Google Fonts em meu site e estou importando através do css:

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900');

O problema é que o Google PageSpeed Insights notifica a seguinte informação:

Garanta que o texto continue visível durante o carregamento da webfont

Use o recurso CSS de exibição de fonte para garantir que o texto possa ser visto pelo usuário enquanto as webfonts são carregadas.

Abaixo da notificação, são listadas todas as especificações de fonte que estou importando: inserir a descrição da imagem aqui

Alguém já teve este problema?

Sabe como isto pode ser ajustado?

Estou com essa notificação em vários sites que utilizam o Google Fonts.

1 Resposta 1

3

Muito provavelmente é por causa dos FOUT, FOIT, FOFT, vc pode ler sobre eles aqui https://css-tricks.com/fout-foit-foft/

Repare que vc está importando 4MB de fontes....

inserir a descrição da imagem aqui

Como o site deve estar carregando muito coisa em um determinado momento o site pode aparentar estar sem fontes, ou as fontes podem "piscar", demorando para aparecer pro usuário. No artigo acima tem os detalhes.

Pode ser que se vc adicionar a propriedade font-display para tentar contornar isso adicionando um "fallback" com uma fonte local caso a sua @font-face demore a carregar. Para isso te indico esse outro artigo https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

No seu CSS basicamente vc teria um código desse tipo. Repare no formato das fontes .ttf

@font-face {
  font-family: ExampleFont;
  src: url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900') format('woff2'),
       url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900') format('truetype'),
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

Leia isso tb é importante https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/

4
  • 1
    Complementando, font-display é uma propriedade atualmente em fase experimental, não suporta alguns navegadores antigos e mobiles, mas servira como medida paliativa para o Pagespeed parar de reclamar... haha 30/05/2019 às 20:40
  • Percebi que agora, no Google Fonts, quando importo uma fonte, no final ele vem com a opção de font-display, porém vem com a propriedade &display=swap; sabe dizer qual é a diferença entre fallback e swap? 31/05/2019 às 11:57
  • 1
    @MaurícioKrüger a documentação não explica bem o que é cada um, mas aqui tem vai uma explicação um pouco melhor. swap: Instrui o navegador a usar a fonte de fallback para exibir o texto até que a fonte personalizada tenha sido totalmente baixada. Isso também é conhecido como "flash de texto não estilizado" ou FOUT. fallback: O navegador ocultará o texto por cerca de 100 ms e, se a fonte ainda não tiver sido baixada, usará o texto de fallback. Ele irá trocar para a nova fonte após o download, mas somente durante um curto período de troca (provavelmente 3 segundos).
    – hugocsl
    31/05/2019 às 12:03
  • Outras duas fontes para vc aprofundar no assunto css-tricks.com/almanac/properties/f/font-display e aqui tb css-tricks.com/font-display-masses eu mesmo ainda tenho que ler mais sobre isso rss, tem coisa que a gente vê uma vez e depois vai esquecendo...
    – hugocsl
    31/05/2019 às 12:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .