Display-font: scambia

Contribuisci UX
1

Ciao,

Ho notato che viene utilizzata Google Font (e so dalle impostazioni che è possibile selezionarne più di una).

Per migliorare l’esperienza utente prima che il font venga caricato, è consigliabile aggiungere &display=swap al caricatore CSS di Google.

Quindi: 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;
}

Diventa: 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;
}

Per ulteriori informazioni:

PS. Ci sono alcuni puntini perché, in quanto nuovo utente, non posso incollare più di due link in un post :wink:

2 Mi Piace
2

font-display: swap; influisce sui tempi di blocco e di sostituzione quando si attende il caricamento di un font, ma stiamo includendo il font dal backend (abbiamo un gem discourse-fonts separato: in questo modo si elimina la necessità di effettuare una chiamata a Google e di essere tracciati).

Poiché i font sono inclusi come parte dell’applicazione Discourse al caricamento iniziale, non credo che osserveremmo alcun vantaggio, dato che i font non stanno bloccando il rendering come accadrebbe se facessimo una chiamata a Google (o a un’altra CDN) nel nostro CSS.

L’uso di font-display: swap; rimane comunque un buon consiglio per chiunque aggiunga font personalizzati da una CDN di terze parti in un tema.

6 Mi Piace
3

Hmm… try.discourse.org è un’istanza rappresentativa da esaminare quando si tratta di problemi di prestazioni?

Ho notato che i font vengono caricati da Google lì e ho assunto che fosse una questione globale.

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

1 Mi Piace
4

Ah, ha senso: abbiamo importato il font su Try perché abbiamo un’intestazione che corrisponde a discourse.org (che utilizza Open Sans)… possiamo usare swap lì o addirittura includere il font direttamente nel tema.

Puoi usare Try quando analizzi problemi di prestazioni, ma forse usa la modalità sicura solo per essere sicuro che non sia correlata alle piccole personalizzazioni che abbiamo aggiunto.

4 Mi Piace