Die schnellsten Google Fonts

Wenn Sie font-display: swap; verwenden, was Google Fonts tut, wenn Sie den Standardteil &display=swap der URL verwenden, sagen Sie bereits: „Ich bin mit FOUT einverstanden“, was eine andere Art zu sagen ist, dass Webtext sofort angezeigt wird und wenn die Web-Schriftart fertig ist, „wechselt“ zu ihr.

Es gibt bereits eine asynchrone Natur in dem, was Sie tun, also könnten Sie diese Asynchronität genauso gut auf den Rest des Font-Ladens ausdehnen. Harry Roberts

Wenn Sie font-display für Ihre Google Fonts verwenden, ist es sinnvoll, die gesamte Anfragenkette asynchron zu laden.

Harrys empfohlener Snippet

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

$CSS ist der Hauptteil der URL, die Google Fonts Ihnen gibt.

Sieht nach einer Reduzierung der Renderzeit um ~20% aus, ohne Änderung in der Art und Weise, wie es aussieht/sich anfühlt beim Laden. Ansonsten ist es schneller.

Direkter Link →

Kommentare