Google Fonts fügt font-display hinzu

Google hat auf der I/O angekündigt, dass ihr Font-Service nun die font-display Eigenschaft unterstützt, was eine Reihe von Web-Performance-Problemen löst. Wenn Sie Jubelschreie hören, ist das wahrscheinlich Chris, der in Feierstimmung in die Luft boxt. Er wünschte sich diese Funktion schon seit einiger Zeit und schlägt vor, dass alle @font-face Blöcke die Eigenschaft in Betracht ziehen sollten.

Zach Leatherman hat die Details

Das sind große Neuigkeiten – es bedeutet, dass Entwickler jetzt mehr Kontrolle über das Ladeverhalten von Google Fonts-Webfonts haben. Wir können das sofortige Rendern von Fallback-Text erzwingen (bei Verwendung von font-display: swap), anstatt uns auf das Standardverhalten des Browsers zu verlassen, bei dem der Text bis zu 3 Sekunden lang unsichtbar ist, während die Webfont-Anfrage unterwegs ist.

Es ist auch ein bisschen wegweisend. Soweit ich weiß, ist dies der erste Webfont-Host, der die Unterstützung für diese sehr wichtige font-display-Funktion anbietet.

Ja, in der Tat eine große Sache! Sie erinnern sich vielleicht, dass font-display dem Browser mitteilt, wie (und irgendwie wann) Fonts geladen werden sollen. Das macht es zu einer möglichen Waffe, um Probleme mit FOUT und FOIT zu bekämpfen. Chris hat erwähnt, wie er den Wert optional genau aus diesem Grund mag.

@font-face {
  font-family: "Open Sans Regular";
  src: url("...");
  font-display: optional;
}

Oh, und dies ist ein guter Zeitpunkt, um alle an Monica Dinculescus font-display Demo zu erinnern, in der sie alle verschiedenen font-display Werte und ihre Funktionsweise in der Praxis untersucht. Sie ist super raffiniert und einen Blick wert.

Direkter Link →