Eine Schriftart auswählen und richtig einbinden

Eine Schrift wird als Designentscheidung gewählt: diese Familie, diese Schnitte, diese Größen. Über die zweite Hälfte wird nie gesprochen. Wie gelangt diese Familie in den Browser, was steht auf dem Bildschirm, bis die Datei da ist, und verrutschen die Zeilen, sobald der Text endlich sitzt? Fragen des Einbindens. Ihre Antworten bestimmen die erste Sekunde, die jemand sieht.

Wie viele Schnitte werden wirklich gebraucht

Dass eine Familie acht Schnitte hat, heißt nicht, dass Sie acht brauchen. Die meisten Websites kommen mit dreien aus. Regular für den Fließtext, Bold für Hervorhebungen, Semibold für Überschriften.

Jeder zusätzliche Schnitt ist eine weitere Datei. Ein moderner, auf den lateinischen Zeichensatz reduzierter Schnitt liegt bei zwanzig bis vierzig Kilobyte; sechs Schnitte überschreiten zweihundert mühelos, und dieses Gewicht wird bei jedem Erstbesuch erneut bezahlt. Jedes Mal aufs Neue.

Hinterfragen Sie auch die kursiven Schnitte. Steht auf der Website wirklich kursiver Text, oder genügt die vom Browser errechnete Schräglage, die keine einzige zusätzliche Datei kostet?

Selbst ausliefern sollte der Normalfall sein

Eine Schrift von einem fremden CDN zu holen fügt eine weitere Domain hinzu. Die Verbindung dorthin kostet den Browser Zeit. Liefern Sie die Datei von Ihrer eigenen Domain aus, entfällt dieser Schritt vollständig und die Schrift steht eine Rundreise früher bereit.

Der zweite Gewinn heißt Kontrolle. Bei einer lokalen Datei können Sie den Zeichensatz reduzieren, die Cache-Dauer selbst festlegen und wissen, dass sich die Version nicht eines Tages unter Ihnen ändert.

Für türkische Inhalte ist die Reduktion wichtig. Trägt eine Schriftdatei auch kyrillische, griechische und vietnamesische Zeichen, vervielfacht sich ihre Größe, und keines dieser Zeichen erscheint je auf der Seite.

Das Anzeigeverhalten wählen Sie

Während die Datei lädt, liest der Browser aus der Eigenschaft font-display, was er tun soll.

swap zeigt den Text sofort in einer Ersatzschrift und tauscht ihn aus, sobald die eigentliche Datei eingetroffen ist. Der Text ist ab der ersten Sekunde lesbar. Bezahlt wird mit einem Sprung.

optional ist strenger: kommt die Datei nicht sehr schnell, bleibt sie für diesen Aufruf ungenutzt und die Seite behält die Ersatzschrift. Ein Sprung entsteht nicht.

Für Fließtext ist swap meist die richtige Wahl, weil Lesbarkeit eine halbe Sekunde Verzögerung deutlich aufwiegt.

Den Sprung verkleinern

Haben Ersatzschrift und eigentliche Schrift unterschiedliche Zeichenbreiten, verrutschen die Zeilen genau im Moment des Austauschs, und dieses Rutschen wird als Cumulative Layout Shift gemessen. Die Korrektur hat zwei Schritte.

Erstens: die auf dem ersten Bildschirm verwendete Schriftdatei vorab laden. Der Browser beginnt den Download dann sofort, ohne auf das Auswerten des CSS zu warten.

Zweitens: die Maße der Ersatzschrift an die eigentliche annähern. Mit size-adjust, ascent-override und descent-override wird eine lokale Ersatzschrift definiert, und der Austausch schrumpft auf etwas, das niemand mehr sieht.

Die Prüfung

Öffnen Sie die Seite mit simulierter langsamer Verbindung und beobachten Sie die ersten zwei Sekunden.

Erscheint gar kein Text, fehlt die Einstellung font-display. Erscheint Text und verrutschen danach die Zeilen, wurden die Maße der Ersatzschrift nie angepasst, der zweite der beiden Schritte also übersprungen. Fehlt beides, ist die Arbeit erledigt.