Webschriften optimieren: So gehts ganz einfach

Eine Webschrift kostet Ladezeit, kann beim Laden das Layout verschieben und schickt bei falscher Einbindung die IP-Adresse jedes Besuchers an einen fremden Server. Alle drei Probleme lassen sich mit WOFF2, einer angepassten Ersatzschrift, Variable Fonts, Subsetting und Self-Hosting lösen.

Für Frontend Entwickler gehört das zum Handwerk, für Betreiber von Firmenwebsites ist es ebenso wichtig. Schriften beeinflussen zwei der drei Core Web Vitals, und die dynamische Einbindung von Google Fonts beschäftigt deutsche Gerichte seit Januar 2022.

Wir haben alle Angaben in diesem Beitrag am 3. November 2026 neu geprüft, die Browserdaten anhand von caniuse.com und der Kompatibilitätsdaten des MDN.

Was bringt es wirklich, Webschriften zu optimieren?

Ohne Webschriften sieht jede Website aus wie ein Systemdialog. Mit ihnen lädt der Browser zusätzliche Dateien, und bis die Schrift da ist, zeigt er entweder gar keinen Text oder eine Ersatzschrift. Beides merken Besucher, und beides misst Google.

Google misst die Nutzererfahrung mit drei Core Web Vitals: dem Largest Contentful Paint (LCP), also wann das größte sichtbare Element fertig dargestellt ist, Interaction to Next Paint (INP), also wie schnell die Seite auf Eingaben reagiert, und dem Cumulative Layout Shift (CLS), die Summe unerwarteter Verschiebungen. INP hat am 12. März 2024 den früheren Wert First Input Delay abgelöst.

Als gut gelten ein LCP bis 2,5 Sekunden, ein INP bis 200 Millisekunden und ein CLS bis 0,1, jeweils für drei Viertel der Seitenaufrufe.

Webschriften wirken direkt auf zwei dieser Werte. Wenn das größte Element eine Überschrift ist, verzögert sich der LCP, bis deren Schrift geladen ist. Wenn der Browser die Ersatzschrift gegen die Webschrift tauscht und sich dabei der Text verschiebt, steigt der CLS.

Schriften berühren den INP kaum, er hängt vor allem vom JavaScript ab.

Der First Contentful Paint (FCP), der Moment des ersten sichtbaren Inhalts, gehört nicht zu den Core Web Vitals. PageSpeed Insights und Lighthouse führen ihn als Diagnosewert. Er verschlechtert sich, solange der Browser Text ausblendet, weil er auf die Webschrift wartet.

Google beschreibt den Einfluss auf das Ranking zurückhaltend: Die Core Web Vitals fließen in die Ranking-Systeme ein, eine gute Nutzererfahrung ersetzt aber keine relevanten Inhalte. Schnelle Schriften verhindern deshalb vor allem einen Nachteil im Ranking.

Seit einem Urteil des Landgerichts München I vom 20. Januar 2022 ist die Einbindung über Google-Server zudem rechtlich angreifbar. Was daraus folgte, von der Abmahnwelle bis zum EU-US Data Privacy Framework, steht im Kapitel zur DSGVO.

Welches Schriftformat brauchen Sie heute tatsächlich?

Es genügt WOFF2: Ein zweites Format brauchen Sie nicht mehr, weder TTF für ältere Browser noch EOT für den Internet Explorer.

Microsoft hat den Internet Explorer am 15. Juni 2022 eingestellt, und ein Browser, der WOFF2 nicht versteht, scheitert heute ohnehin an vielen anderen Techniken.

Laut caniuse.com (Datenstand 29. Oktober 2026) unterstützen 97,3 Prozent der genutzten Browser WOFF2. Chrome unterstützt das Format seit Version 36, Firefox seit 39, Edge seit 14. Safari 10 und 11 lesen WOFF2 nur unter macOS Sierra oder neuer, vollständig unterstützt es Safari ab Version 12.

Die vier Formate im direkten Vergleich

Die Kompression gibt den Ausschlag für die Dateigröße. Open Sans Regular mit lateinischem Zeichensatz wiegt bei Fontsource 35,6 Kilobyte als TTF, 18,6 Kilobyte als WOFF2 und 17,3 Kilobyte als WOFF (gemessen am 3. November 2026). Gegenüber der unkomprimierten TTF-Datei halbiert sich die Größe also.

Bei dieser kleinen Teildatei war WOFF sogar 1,4 Kilobyte kleiner als WOFF2. Das spricht trotzdem nicht für WOFF: Die Browserunterstützung ist gleich, und sowohl Google Fonts als auch Fontsource liefern WOFF2 als Standardformat aus.

Aus älteren Stylesheets können Sie die Kette mehrerer Formate in der src-Angabe streichen, ein Beispiel steht unter Fehler 3. Der Browser lädt davon zwar nur die erste Datei, die er versteht. Die Kette bläht aber das CSS auf, und alle Formate müssen auf dem Server liegen und gepflegt werden.

Unser Beitrag über CSS-Kurzschreibweisen zeigt, wie Sie ein Stylesheet weiter verschlanken.

Hartnäckig hält sich auch der Irrtum, der Server müsse WOFF-Dateien zusätzlich per Gzip oder Deflate komprimieren. WOFF und WOFF2 sind bereits komprimiert, eine zweite Kompression kostet Serverleistung und spart keine Bytes. Wenn Ihre .htaccess noch Regeln zur Kompression von Schriftdateien enthält, können Sie diese löschen.

Wie verhindern Sie Layout Shifts durch Webschriften?

Beim ersten Rendern hat der Browser die Webschrift meist noch nicht. Er blendet den Text aus oder greift auf eine Ersatzschrift aus dem System zurück. Sobald die Webschrift eintrifft, tauscht er die Ersatzschrift gegen sie aus.

Weil beide Schriften unterschiedlich breit und hoch sind, springt in diesem Moment das Layout. Genau diesen Sprung zählt der CLS.

Was in dieser Zeit passiert, steuert die Angabe font-display in der @font-face-Regel. Sie kennt fünf Werte, die sich in der Länge zweier Phasen unterscheiden: wie lange der Browser den Text unsichtbar lässt (Blockphase) und wie lange er die Webschrift danach noch einsetzt (Austauschphase).

• auto überlässt die Wahl dem Browser. Chrome und Firefox verhalten sich dann wie bei block
• block blendet den Text aus, bis die Webschrift da ist. Chromium-Browser und Firefox warten höchstens drei Sekunden, Safari laut web.dev so lange, bis die Schrift geladen ist
• swap zeigt sofort die Ersatzschrift und tauscht aus, sobald die Webschrift eintrifft, auch noch nach mehreren Sekunden. Das ist der häufigste Auslöser für Layout-Sprünge
• fallback blendet den Text nur sehr kurz aus, die Spezifikation empfiehlt höchstens 100 Millisekunden. Wenn die Webschrift innerhalb von rund drei Sekunden eintrifft, tauscht der Browser aus, sonst bleibt die Ersatzschrift
• optional nutzt die Webschrift nur, wenn sie binnen rund 100 Millisekunden da ist. Sonst bleibt es für diesen Seitenaufruf bei der Ersatzschrift, und der Browser lädt die Datei für den nächsten Aufruf in den Cache

Für ein ruhiges Layout ist optional die sicherste Wahl, weil es keinen späten Austausch gibt. Seiten mit hohem Gestaltungsanspruch, die die Webschrift unbedingt zeigen wollen, fahren mit swap und einer angepassten Ersatzschrift am besten. Der Wert fallback liegt dazwischen: Er erlaubt den Austausch nur in den ersten rund drei Sekunden und vermeidet so die besonders störenden späten Sprünge.

Die angepasste Ersatzschrift ist der wichtigste Hebel gegen Layout-Sprünge. In einer eigenen @font-face-Regel für die Systemschrift skalieren Sie mit size-adjust die Glyphen insgesamt und legen mit ascent-override, descent-override und line-gap-override Ober- und Unterlänge sowie den Zeilenabstand fest. Wenn die Ersatzschrift so genau den Platz der Webschrift belegt, findet der Austausch statt, ohne dass sich der Text verschiebt.

Laut den Kompatibilitätsdaten des MDN (Stand 2. November 2026) unterstützen Chrome, Edge und Firefox alle vier Angaben. Safari kennt seit Version 17 nur size-adjust, die drei übrigen gibt es dort bislang nur in der Technology Preview.

In Safari wird der Sprung deshalb kleiner, verschwindet aber nicht in jedem Fall.

Die Werte im Beispiel gelten nur für Inter und Arial. Passende Werte für Ihr Schriftpaar ermitteln Sie mit dem kostenlosen Fallback Font Generator auf screenspan.net: Sie laden Ihre Webschrift hoch, wählen eine Systemschrift und legen beide mit Schiebereglern deckungsgleich übereinander. Das Werkzeug gibt die fertige Regel aus. Next.js berechnet die Werte mit next/font sogar automatisch. Diese Feinarbeit gehört wie Media Queries und Container Queries zu einem Responsive Design, das auf jedem Bildschirm stabil bleibt.

Ein <link rel="preload"> im Kopf der HTML-Datei beschleunigt den Download: Der Browser fordert die Schrift an, bevor er das Stylesheet ausgewertet hat. Das Attribut crossorigin ist dabei Pflicht, auch bei selbst gehosteten Schriften, weil Browser Schriftdateien immer im CORS-Modus laden.

Sie sollten nur die ein, zwei Dateien vorladen, die im sichtbaren Bereich gebraucht werden, denn jede vorgeladene Datei konkurriert mit Bildern und Skripten um die Bandbreite.

Warum sind Variable Fonts fast immer die bessere Wahl?

Eine klassische Schriftfamilie liefert Regular, Italic, Bold, Bold Italic, Light und Medium jeweils als eigene Datei, für eine typische Website sind das sechs bis zehn Dateien. Ein Variable Font packt die Varianten in eine einzige Datei und stellt das Gewicht stufenlos bereit.

Wie viel das spart, hängt von der Zahl der Schnitte ab: Bei Fontsource wiegt Inter mit lateinischem Zeichensatz als variable Datei mit Gewichtsachse 48 Kilobyte, ein einzelner statischer Schnitt wie Regular 24 Kilobyte (gemessen am 3. November 2026).

Mit zwei Schnitten liegen beide Wege gleichauf, ab dem dritten ist die variable Datei leichter, und der Browser stellt nur noch eine Anfrage. Gewicht und Achsen steuern Sie per CSS:

Die in der Spezifikation festgelegten Standardachsen wie Gewicht und Breite setzen Sie über die gewohnten Eigenschaften font-weight und font-stretch. Eigene Achsen der Schrift, hier die Strichstärke GRAD von Roboto Flex, erreichen Sie über font-variation-settings. Gestalter regeln so Gewicht, Breite, Neigung und optische Größe stufenlos, und die Typografie kann sich an die Größe des Viewports anpassen, ohne dass der Browser weitere Dateien nachlädt.

Drei Variable Fonts, die Sie sofort einsetzen können

Inter von Rasmus Andersson ist eine der meistgenutzten Schriften für Benutzeroberflächen im Web. Die variable Fassung hat eine Gewichtsachse von 100 bis 900 und eine Achse für die optische Größe von 14 bis 32; die Kursive liegt seit Version 4.0 als eigene Datei vor. Sie bekommen Inter kostenlos über Fontsource oder rsms.me/inter.

Roboto Flex aus der Google-Fonts-Bibliothek bringt 13 Achsen mit, darunter Gewicht, Breite, Neigung, optische Größe und Strichstärke. Source Sans 3 von Adobe hat eine Gewichtsachse von 200 bis 900 und eignet sich für Fließtext. Alle drei stehen unter der SIL Open Font License. Laut caniuse.com unterstützen 97,2 Prozent der genutzten Browser Variable Fonts, also praktisch ebenso viele wie WOFF2. Für eine neue Website ist ein Variable Font als Hauptschrift deshalb der Standardweg, wenn Sie mehr als zwei Schnitte brauchen.

Wie binden Sie Webschriften DSGVO-konform ein?

Das Landgericht München I hat mit Urteil vom 20. Januar 2022 (Az. 3 O 17493/20) entschieden, dass die dynamische Einbindung von Google Fonts ohne Einwilligung der Besucher gegen die DSGVO verstößt, und dem Kläger 100 Euro Schadensersatz zugesprochen. Beim Abruf der Schriften übermittelt der Browser die IP-Adresse an Google, und sie gilt als personenbezogenes Datum.

Das Gericht sah kein berechtigtes Interesse des Websitebetreibers, weil sich die Schriften auch ohne Verbindung zu Google nutzen lassen.

Auf das Urteil folgte im Herbst 2022 eine Abmahnwelle, oft mit einer Forderung von 170 Euro. Am 21. Dezember 2022 ließ die Generalstaatsanwaltschaft Berlin Räume eines Rechtsanwalts und seines Mandanten durchsuchen, wegen des Verdachts des teils versuchten Abmahnbetrugs und der versuchten Erpressung in mindestens 2.418 Fällen. Zwei Arrestbeschlüsse sicherten zusammen 346.000 Euro.

Das Landgericht München I erklärte eine solche Abmahnung am 30. März 2023 (Az. 4 O 13063/22) für unberechtigt. Die Websites seien per Crawler aufgerufen worden, eine persönliche Betroffenheit fehle, und die Gewinnerzielung habe im Vordergrund gestanden.

Seit dem 10. Juli 2023 gilt außerdem der Angemessenheitsbeschluss der EU-Kommission zum EU-US Data Privacy Framework. Google LLC ist unter diesem Rahmen zertifiziert, und das Gericht der EU hat den Beschluss am 3. September 2025 bestätigt (Rechtssache T-553/23).

Für die Übermittlung in die USA, die das Münchner Gericht 2022 noch bemängelt hatte, gibt es damit eine Grundlage.

Der Kern des Münchner Urteils bleibt damit ungeklärt: ob eine Website die IP-Adresse überhaupt an Google weitergeben darf, wenn sie dieselbe Schrift vom eigenen Server ausliefern kann. Ein höchstrichterliches Urteil speziell zu Google Fonts ist uns bis zum 3. November 2026 nicht bekannt.

Dieser Abschnitt ersetzt keine Rechtsberatung.

Die saubere Lösung heißt Self-Hosting. Sie laden die Schriften einmal herunter und liefern sie von Ihrem eigenen Server aus. Der Browser baut dann keine Verbindung zu Google auf und überträgt keine IP-Adresse, eine Einwilligung brauchen Sie dafür nicht. Die Lizenzen der Google-Fonts-Bibliothek, meist die SIL Open Font License, erlauben das.

Der schnellste Weg: Fontsource

Fontsource (fontsource.org) ist ein Open-Source-Projekt, das die Schriften der Google-Fonts-Bibliothek und viele weitere als npm-Pakete bereitstellt. Am 3. November 2026 listete seine Schnittstelle 2.103 Schriftfamilien. Die Installation läuft über Ihren Paketmanager:

Anschließend importieren Sie das Paket einmal in der Hauptdatei Ihrer Anwendung (dem Einstiegspunkt, etwa main.js), zum Beispiel mit import "@fontsource-variable/inter";, und verwenden im CSS die Familie „Inter Variable“. Das setzt einen Bundler wie Vite oder Webpack voraus. Die Schriftdateien liegen danach auf Ihrem Server, der Datenverkehr zu Google entfällt.

Für WordPress wandelt das Plugin OMGF (Optimize My Google Fonts) bestehende Google-Fonts-Einbindungen in lokale Dateien um. Es wird weiter gepflegt, die Version 6.4.1 erschien am 2. November 2026. Danach passen Sie die Datenschutzerklärung an.

Wenn Sie Google Fonts trotzdem von Google laden wollen, brauchen Sie vorher eine Einwilligung über ein Einwilligungsbanner. Bis der Besucher zustimmt, zeigt die Seite eine Systemschrift, und wenn er ablehnt, bleibt es dabei. Das funktioniert, macht das Schriftbild aber von einem Klick im Banner abhängig.

Welche Subsetting-Strategie lohnt sich?

Eine gut ausgebaute Schriftfamilie enthält mehrere hundert Glyphen, darunter kyrillische, griechische und vietnamesische Zeichen. Eine deutsche Website lädt damit viele Bytes, die sie nie darstellt. Subsetting heißt, nur die tatsächlich benötigten Zeichen in die Schriftdatei zu packen.

Bei Fontsource ist Inter Regular in sieben Teildateien aufgeteilt. Die lateinische Teildatei, die für deutsche Texte samt Umlauten, Anführungszeichen und Eurozeichen reicht, wiegt 24 Kilobyte, alle sieben zusammen 95 Kilobyte (gemessen am 3. November 2026).

Rund drei Viertel der Schriftdaten braucht eine deutsche Seite also nicht.

Die vier gängigen Subsetting-Ansätze

Subsetting über unicode-range in CSS funktioniert rein deklarativ. Sie definieren mehrere @font-face-Regeln für dieselbe Schrift, jede mit eigenem unicode-range. Der Browser lädt eine Datei nur, wenn die Seite Zeichen aus ihrem Bereich enthält:

Nach diesem Prinzip arbeiten Google Fonts und Fontsource: Eine deutschsprachige Seite holt meist nur die lateinische Datei, eine Seite mit kyrillischem Text zusätzlich die kyrillische. Beim Self-Hosting lohnt sich diese Aufteilung, wenn Ihre Website Texte in mehreren Sprachen und Schriftsystemen enthält.

Subsetting per Kommandozeile erledigen Sie mit pyftsubset aus dem Python-Paket fonttools. Das Werkzeug glyphhanger von Zach Leatherman ermittelt außerdem, welche Zeichen eine Seite tatsächlich nutzt, und kann die Schrift danach zuschneiden. Ein Befehl für deutsche Texte mit Anführungszeichen, Halbgeviert- und Geviertstrich und Eurozeichen:

Das Ergebnis ist eine WOFF2-Datei mit den lateinischen Grundbuchstaben (ASCII), Umlauten und den deutschen Satzzeichen. Für die Ausgabe als WOFF2 braucht fonttools das Zusatzpaket brotli, deshalb steht es im ersten Befehl.

Subsetting durch Fontsource geschieht automatisch, weil das Standard-CSS jedes Pakets mit unicode-range arbeitet. Einzelne Teildateien importieren Sie nur in Ausnahmefällen und nur bei statischen Paketen, etwa mit import "@fontsource/inter/latin.css";. Für variable Pakete bietet Fontsource diesen Weg nicht an.

Icon-Subsetting betrifft Schriften wie Font Awesome mit Tausenden Symbolen, von denen eine Website vielleicht zwanzig nutzt. Allein die Datei der ausgefüllten Symbole von Font Awesome 6.7.2 wiegt als WOFF2 158 Kilobyte (gemessen am 3. November 2026). IcoMoon und Fontello bauen aus den ausgewählten Symbolen eine eigene, viel kleinere Datei.

Noch schlanker sind einzelne SVG-Grafiken, die ganz ohne Schriftdatei auskommen.

Mit welchen Tools messen Sie Ihre Font-Performance?

Vier kostenlose Werkzeuge liefern die Daten, die Sie brauchen. Vor dem Livegang lohnt außerdem ein Blick in unsere Website-Checkliste.

Vier Tools für den Messalltag

Ein typischer Messlauf beginnt mit PageSpeed Insights für den Ist-Zustand und wechselt dann in die DevTools. Wenn Sie dort im Reiter „Elemente“ eine Überschrift oder einen Absatz auswählen, zeigt der Bereich „Berechnet“ ganz unten die gerenderte Schrift (englisch „Rendered Fonts“): ob sie aus dem Netz oder vom Gerät kommt und wie viele Glyphen das Element nutzt.

Wie viele Zeichen die ganze Seite braucht, ermittelt glyphhanger. Wenn die Zahl weit unter dem Umfang der Schriftdatei liegt, lohnt sich Subsetting.

Die Ansicht „Coverage“ der DevTools hilft bei dieser Frage nicht. Sie misst nur ungenutztes CSS und JavaScript, keine Schriftzeichen.

Zum Datenschutz-Check öffnen Sie in den DevTools den Reiter „Netzwerk“ und filtern nach „Font“. Wenn dort eine Datei von fonts.gstatic.com erscheint oder ohne Filter ein Stylesheet von fonts.googleapis.com, lädt Ihre Website Google Fonts dynamisch, oft über ein Theme oder Plugin, und Sie haben das Problem aus Kapitel fünf.

Welche Fehler bremsen Ihre Webschriften aus?

Langsame Ladezeiten gehen meist auf eine Handvoll wiederkehrender Fehler zurück.

Fehler 1: Fehlendes font-display

Ohne Angabe gilt auto, und Chrome und Firefox blenden den Text dann bis zu drei Sekunden aus. Ergänzen Sie jede @font-face-Regel um font-display: swap, fallback oder optional, je nachdem, wie wichtig Ihnen das Schriftbild gegenüber einem ruhigen Layout ist.

Fehler 2: Zu viele Schriftgewichte

Jedes zusätzliche Gewicht bedeutet eine weitere Schriftdatei. Eine Website mit Regular, Medium, Semibold und Bold, jeweils mit kursivem Schnitt, lädt acht Dateien. Prüfen Sie Ihr Design: Brauchen Sie wirklich Medium und Semibold? Meist reichen zwei Gewichte, und bei einem Variable Font genügt ohnehin eine Datei für alle.

Fehler 3: Überflüssige Kette von Ausweichformaten

In vielen älteren Stylesheets finden Sie Zeilen wie diese:

Diese Kette stammt aus der Zeit, als der Internet Explorer 8 noch eine Rolle spielte. Heute genügt die einzeilige Fassung:

Unser Beitrag zu den CSS-Grundlagen erklärt, wie Sie ein Stylesheet aufräumen.

Fehler 4: Fehlendes crossorigin beim Preload

Wenn beim Preload das Attribut crossorigin fehlt, läuft das Vorladen ins Leere, weil die vorgeladene Datei nicht zur späteren Anfrage passt. Der Browser lädt die Schrift dann ein zweites Mal:

Fehler 5: Dynamische Google-Fonts-Einbindung

Wenn im HTML <link href="https://fonts.googleapis.com/css..."> steht, ruft der Browser bei jedem Seitenaufruf Google-Server auf und übermittelt dabei die IP-Adresse der Besucher. Ohne Einwilligung ist das rechtlich angreifbar, und der Verbindungsaufbau zu zwei fremden Domains kostet zusätzlich Zeit. Ersetzen Sie die Zeile durch eine lokale Einbindung nach Kapitel fünf.

Glossar: 13 wichtige Fachbegriffe zu Webschriften

@font-face

@font-face ist die CSS-Regel, mit der Sie eine eigene Schriftdatei einbinden. Sie enthält mindestens den Namen der Schrift und die Quellenangabe, dazu immer font-display und bei Bedarf weitere Angaben wie unicode-range. Ohne diese Regel kennt der Browser Ihre Webschrift nicht.

CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) misst die unerwarteten Layoutverschiebungen einer Seite und gehört zu den drei Core Web Vitals. Google empfiehlt einen Wert bis 0,1. Webschriften erhöhen ihn, wenn der Wechsel von der Ersatzschrift zur Webschrift den Text verschiebt.

DSGVO

Die Datenschutz-Grundverordnung (DSGVO) regelt in der EU den Umgang mit personenbezogenen Daten. Für Webschriften ist sie wichtig, weil die IP-Adresse als personenbezogenes Datum gilt. Das LG München I wertete im Januar 2022 die dynamische Einbindung von Google Fonts ohne Einwilligung als Verstoß.

FCP (First Contentful Paint)

First Contentful Paint (FCP) markiert den Zeitpunkt, zu dem erstmals Inhalt auf dem Bildschirm erscheint. Er ist kein Core Web Vital, sondern ein Diagnosewert in PageSpeed Insights und Lighthouse. Webschriften mit font-display: block verzögern ihn. Als gut gilt ein Wert bis 1,8 Sekunden.

font-display

font-display steuert, wie sich der Browser verhält, solange eine Webschrift lädt. Die fünf Werte auto, block, swap, fallback und optional legen fest, ob und wie lange der Text unsichtbar bleibt und bis wann der Browser die Webschrift noch einsetzt. Die Angabe gehört in jede @font-face-Regel.

Fontsource

Fontsource (fontsource.org) ist eine Open-Source-Bibliothek, die mehr als 2.000 Schriftfamilien als npm-Pakete bereitstellt. Über Fontsource binden Sie Google Fonts und andere Schriften lokal ein, ohne Dateien selbst herunterzuladen und umzuwandeln.

LCP (Largest Contentful Paint)

Largest Contentful Paint (LCP) misst, wann das größte sichtbare Element im Viewport fertig dargestellt ist, und gehört zu den Core Web Vitals. Wenn das eine Überschrift in einer Webschrift ist, verzögert deren Ladezeit den LCP direkt. Als gut gilt ein Wert bis 2,5 Sekunden.

Preload

Preload ist ein Hinweis im HTML (<link rel="preload">), mit dem Sie den Browser anweisen, eine Ressource früh und mit hoher Priorität zu laden. Für die wichtigste Webschrift im sichtbaren Bereich ist das sinnvoll, immer mit dem Attribut crossorigin.

size-adjust

size-adjust ist eine Angabe in der @font-face-Regel, die die Glyphen einer Schrift prozentual skaliert. Zusammen mit ascent-override, descent-override und line-gap-override passt sie eine Ersatzschrift an die Webschrift an, damit der Austausch keinen Layout-Sprung auslöst. Safari unterstützt seit Version 17 nur size-adjust.

Subsetting

Subsetting bezeichnet das Zuschneiden einer Schriftdatei auf die tatsächlich benötigten Glyphen. Inter Regular schrumpft bei Fontsource so von 95 Kilobyte für alle Zeichensätze auf 24 Kilobyte für den lateinischen. Werkzeuge sind pyftsubset aus fonttools und glyphhanger.

unicode-range

unicode-range ist eine Angabe in der @font-face-Regel, die dem Browser mitteilt, für welche Zeichen eine Schriftdatei zuständig ist. Der Browser lädt die Datei nur, wenn die Seite Zeichen aus diesem Bereich enthält. Darauf beruht das Subsetting für mehrsprachige Websites.

Variable Font

Ein Variable Font packt mehrere Gewichte, Breiten und weitere Achsen in eine einzige Schriftdatei. Statt einzelner Dateien für jedes Gewicht laden Sie nur eine und steuern die Darstellung über font-weight, font-stretch oder font-variation-settings. Laut caniuse.com unterstützen 97,2 Prozent der genutzten Browser das Format.

WOFF2

Web Open Font Format 2 (WOFF2) ist das Schriftformat für das Web, seit dem 1. März 2018 offizielle Empfehlung des W3C. Es komprimiert Schriftdaten mit dem Verfahren Brotli und wird von 97,3 Prozent der genutzten Browser unterstützt. 2026 ist es das einzige Format, das Sie für die Produktion brauchen.

FAQ: Wie optimieren Sie Webschriften 2026 richtig?

Quellen

• web.dev (Google): Optimize web fonts, web.dev/learn/performance/optimize-web-fonts, besucht am 03.11.2026
• web.dev (Google): Web Vitals, web.dev/articles/vitals; First Contentful Paint (FCP), web.dev/articles/fcp; Interaction to Next Paint becomes a Core Web Vital on March 12, web.dev/blog/inp-cwv-march-12, besucht am 03.11.2026
• Google Search Central: Understanding Core Web Vitals and Google search results; Understanding page experience in Google Search results, developers.google.com/search/docs/appearance, besucht am 03.11.2026
• Chrome for Developers: What’s new in Lighthouse 13, 10. Oktober 2025, developer.chrome.com/blog/lighthouse-13-0, besucht am 03.11.2026
• Can I use: WOFF 2.0, WOFF, TTF/OTF, EOT, Variable fonts, caniuse.com (Datenstand 29.10.2026), besucht am 03.11.2026
• MDN Web Docs: font-display, size-adjust, ascent-override; Browser-Kompatibilitätsdaten (Stand 02.11.2026), developer.mozilla.org/en-US/docs/Web/CSS/@font-face, besucht am 03.11.2026
• W3C: CSS Fonts Module Level 4, Abschnitt font-display, www.w3.org/TR/css-fonts-4/, besucht am 03.11.2026
• W3C: WOFF File Format 2.0 Recommendation, Pressemitteilung vom 01.03.2018, www.w3.org/press-releases/2018/woff2-rec/, besucht am 03.11.2026
• Fontsource: Installing Fonts, Individual Subsets, Variable Fonts, fontsource.org/docs, sowie Schnittstelle api.fontsource.org, besucht am 03.11.2026
• rsms: Inter, rsms.me/inter, und Release Notes Inter 4.0, github.com/rsms/inter/releases, besucht am 03.11.2026
• Screenspan: Fallback Font Generator, screenspan.net/fallback, besucht am 03.11.2026
• Next.js: Font Optimization (next/font), nextjs.org/docs, besucht am 03.11.2026
• fonttools: pyftsubset, fonttools.readthedocs.io; Zach Leatherman: glyphhanger, github.com/zachleat/glyphhanger, besucht am 03.11.2026
• WordPress.org: OMGF, Version 6.4.1 vom 02.11.2026, wordpress.org/plugins/host-webfonts-local/, besucht am 03.11.2026
• Landgericht München I: Urteil vom 20.01.2022, Az. 3 O 17493/20, zitiert nach www.ra-plutte.de/lg-muenchen-dynamische-einbindung-google-web-fonts-ist-dsgvo/, besucht am 03.11.2026
• Händlerbund: Urteil zu Google-Fonts-Abmahnungen (LG München I, 30.03.2023, Az. 4 O 13063/22), 24.05.2023, ohn.haendlerbund.de, besucht am 03.11.2026
• e-recht24: Generalstaatsanwaltschaft Berlin geht gegen Abmahnanwalt und seinen Mandanten vor, Stand 09.01.2023, www.e-recht24.de/news/datenschutz/13089-generalstaatsanwaltschaft-berlin-google-fonts.html, besucht am 03.11.2026
• Europäische Kommission: Durchführungsbeschluss (EU) 2023/1795 vom 10.07.2023 zum EU-US Data Privacy Framework; Gericht der EU: Urteil vom 03.09.2025, Rechtssache T-553/23 (Latombe), besucht am 03.11.2026
• Google: Datenschutzrahmen EU-USA, policies.google.com/privacy/frameworks; Google Fonts: Privacy and Data Collection, developers.google.com/fonts/faq/privacy, besucht am 03.11.2026
• Eigene Messungen der Dateigrößen am 03.11.2026: Fontsource-CDN (cdn.jsdelivr.net/fontsource) für Inter und Open Sans, cdnjs.cloudflare.com für Font Awesome 6.7.2

Änderungshistorie

03.11.2026: Neufassung durch die Redaktion. Core Web Vitals auf LCP, INP und CLS korrigiert, FCP als Diagnosewert eingeordnet. Fünf statt vier Werte für font-display, Browserunterstützung der Fallback-Anpassung (Safari) ergänzt, DevTools-Ansicht „Coverage“ durch die gerenderten Schriften ersetzt. Rechtslage um Abmahnwelle, Urteil vom März 2023 und EU-US Data Privacy Framework erweitert. Dateigrößen neu gemessen, Fontsource-Importe und Inter-Beispiel auf den aktuellen Stand gebracht, zwei Infografiken neu.

22.04.2026: Komplette Neufassung durch Markus Seyfferth. Fokus auf WOFF2 als alleinigem Format, Core Web Vitals, Variable Fonts, DSGVO nach LG München Urteil und Self Hosting via Fontsource. Veraltete Formate (EOT, TTF Fallback) und falsche Empfehlungen (Deflate für WOFF) entfernt. Glossar und FAQ neu ergänzt.

16.07.2024: Redaktionelles Update.

Juni 2016: Erstveröffentlichung durch Denis Potschien.