Display-Schriftart: Tausch

Beitragen UX
1

Hallo,

ich habe bemerkt, dass Google Fonts verwendet werden (und in den Einstellungen weiß ich, dass mehrere ausgewählt werden können).

Um die Benutzererfahrung zu verbessern, bevor die Schriftart geladen ist, ist es ratsam, &display=swap zum Google CSS-Loader hinzuzufügen.

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

Wird zu: 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;
}

Mehr dazu lesen unter:

PS. Einige Punkte sind dort, weil ich als Neuling nicht mehr als zwei Links in einem Beitrag einfügen kann :wink:

2 „Gefällt mir“
2

font-display: swap; beeinflusst die Blockier- und Austauschzeit beim Warten auf das Laden einer Schriftart. Wir binden die Schriftart jedoch über das Backend ein (wir verwenden eine separate discourse-fonts gem – auf diese Weise wird vermieden, eine Anfrage an Google zu stellen und dabei getrackt zu werden).

Da die Schriftarten beim initialen Laden bereits als Teil der Discourse-Anwendung eingebunden sind, erwarte ich keinen Vorteil, da die Schriftarten das Rendering nicht blockieren, wie es der Fall wäre, wenn wir in unserem CSS eine Anfrage an Google (oder ein anderes CDN) stellen würden.

Die Verwendung von font-display: swap; ist dennoch wahrscheinlich eine gute Empfehlung für jeden, der benutzerdefinierte Schriftarten über ein CDN eines Drittanbieters in einem Theme einbindet.

6 „Gefällt mir“
3

Hmmm… Ist try.discourse.org eine repräsentative Instanz, wenn es um Leistungsprobleme geht?

Ich habe gesehen, dass dort Schriftarten von Google geladen wurden, und ging davon aus, dass dies ein globales Problem ist.

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

1 „Gefällt mir“
4

Ah, das ergibt Sinn. Wir haben die Schriftart in Try importiert, da wir einen Header haben, der mit discourse.org übereinstimmt (welches Open Sans verwendet). Wir können dort swap verwenden oder die Schriftart sogar direkt im Theme einbinden.

Du kannst Try verwenden, um Leistungsprobleme zu untersuchen, aber verwende vielleicht den Safe-Mode, um sicherzugehen, dass es nicht mit den kleinen Anpassungen zusammenhängt, die wir vorgenommen haben.

4 „Gefällt mir“