Exibição-fonte: trocar

Contribuir Experiência do Usuário
1

Olá,

Percebi que a fonte do Google está sendo usada (e nas configurações sei que é possível selecionar mais de uma).

Para melhorar a experiência do usuário antes que a fonte seja carregada, é recomendável adicionar &display=swap ao carregador de CSS do Google.

Então: css?family=Open+Sans:400,400i,700

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Fica assim: css?family=Open+Sans:400,400i,700&display=swap

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Leia mais em:

PS. Alguns pontos estão lá porque, como novato, não consigo colar mais de dois links em uma postagem :wink:

2 curtidas
2

font-display: swap; afeta o tempo de bloqueio e de troca ao aguardar o carregamento de uma fonte, mas estamos incluindo a fonte a partir do backend (temos um gem discourse-fonts separado — fazer dessa forma elimina a necessidade de fazer uma chamada ao Google e ser rastreado).

Portanto, como as fontes são incluídas como parte do aplicativo Discourse na carga inicial, não acho que veríamos qualquer benefício, pois as fontes não estão impedindo a renderização como ocorreria se estivéssemos fazendo chamadas ao Google (ou a outro CDN) em nosso CSS.

Usar font-display: swap; ainda é provavelmente um bom conselho para qualquer pessoa que esteja adicionando fontes personalizadas de um CDN de terceiros em um tema.

6 curtidas
3

Hmm… Será que o try.discourse.org é uma instância representativa para analisar quando se trata de problemas de desempenho?

Vi fontes carregadas do Google lá e assumi que era algo global.

Screen Shot 2020-11-17 at 22.42.45
Screen Shot 2020-11-17 at 22.42.45986×490 66.7 KB

1 curtida
4

Ah, faz sentido. Importamos a fonte no Try porque temos um cabeçalho que corresponde ao discourse.org (que usa Open Sans)… podemos usar swap lá ou até mesmo incluir a fonte diretamente no tema.

Você pode usar o Try ao analisar problemas de desempenho, mas talvez seja melhor usar o modo seguro apenas para garantir que não esteja relacionado a pequenas personalizações que adicionamos.

4 curtidas