FOIT und FOUT gemeinsam bekämpfen 

Vieles von Divya mit dem Setup

Es gibt 2 Arten von Problemen, die bei der Verwendung von Webfonts auftreten können: Flash of invisible text (FOIT) und Flash of Unstyled Text (FOUT) … Wenn wir sie vergleichen müssten, ist FOUT natürlich das kleinere Übel

Wenn Sie FOIT bekämpfen wollen, ist das einfachste Werkzeug die CSS-Eigenschaft font-display. Ich mag den Wert optional, weil ich das Aussehen von sich ändernden Schriftarten im Allgemeinen nicht mag.

Wenn Sie beide bekämpfen wollen, ist eine Option, die Schriftarten vorzuladen

<link rel="preload" href="/fonts/awesome-l.woff2" as="font" />

Aber...

Preload ist dein Freund, aber nicht dein bester Freund … übermäßiges Preloading kann die Leistung erheblich verschlechtern, da Preloads das anfängliche Rendern blockieren.

Genau wie CSS.

In einem Gespräch mit Scott Jehl wies er mich darauf hin, dass "Preloads das anfängliche Rendern blockieren" nicht ganz stimmt, und er hat einen Testfall zusammengestellt. Eine Ressource mit <link rel="preload" ...> blockiert das Rendern an sich nicht.

Selbst riesige Seiten tun nicht viel für die Leistung beim Laden von Schriftarten. Roel Nieskens

Ich hatte erwartet, dass große Nachrichtenseiten sich sehr bewusst mit den von ihnen verwendeten Schriftarten auseinandersetzen und sicherstellen, dass alles stark optimiert ist. Es stellt sich heraus, dass ein einfacher Sonntagnachmittag mit Hacking viel Daten einsparen könnte: Wir könnten leicht etwa 200 KB einsparen

Schriftarten sind ein so wichtiger Bestandteil der Web-Performance, also werden wir besser darin! Hier ist Zach Leatherman auf der Performance.now() Konferenz

Ein Teil der Geschichte ist, dass wir uns vielleicht einfach auf JavaScript verlassen müssen, um die Dinge zu tun, die wir tun müssen. Divya wieder

Web-Schriftarten sind primär CSS-orientiert. Es kann sich daher wie eine schlechte Praxis anfühlen, JavaScript zur Lösung eines CSS-Problems zu verwenden, insbesondere da JavaScript für ein ständig zunehmendes Seitengewicht verantwortlich ist.

Aber manchmal muss man es einfach tun, um das zu erreichen, was man erreichen will. Vielleicht möchten Sie die Seitenvisibilität selbst verwalten? Hier ist Divyas Demonstrationsausschnitt

const font = new fontFace("My Awesome Font", "url(/fonts/my-awesome-font.woff2)" format('woff2')")
  font.load().then (() => {
    document.fonts.add(font);
    document.body.style.fontFamily = "My Awesome Font, serif";

    // we can also control visibility of the page based on a font loading //
    var content = document.getElementById("content");
    content.style.visibility = "visible";
    })

Aber es gibt noch eine Reihe anderer Gründe. Zach hat sie dokumentiert

• Da beim Laden von Schriftarten jede davon Repaints verursachen kann und Sie diese gruppieren möchten.
• Da der Benutzer angegeben hat, dass er weniger Daten oder weniger Bewegung verwenden möchte.
• Weil Sie langsamere Netzwerke berücksichtigen möchten.
• Da Sie ein Drittanbieter-Tool verwenden, das font-display nicht handhaben kann.