Webschriften optimieren ist im Jahr 2026 keine Fleißaufgabe für Frontend Entwickler mehr, sondern eine Pflichtübung für jeden, der im Netz ranken und gleichzeitig abmahnsicher unterwegs sein will. Zwei Kräfte machen dieses Thema so dringlich: Googles Core Web Vitals und die deutsche Rechtsprechung zum Datenschutz. Wer beides ignoriert, zahlt doppelt, nämlich mit Sichtbarkeit und mit Schadensersatz.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügenDas Wichtigste in Kürze
- WOFF2 ist 2026 das einzige relevante Schriftformat. WOFF, TTF und EOT brauchen Sie nicht mehr, der Browser Support für WOFF2 liegt bei über 98 Prozent.
- Layout Shifts durch Webschriften bestrafen Ihre Core Web Vitals. Mit
font-display,size-adjustund passenden Fallbacks drücken Sie den CLS Wert auf null. - Variable Fonts ersetzen bis zu zehn Einzeldateien durch eine einzige Datei. Eine typische Variable Font liegt bei rund 170 Kilobyte.
- Google Fonts über Google Server einzubinden ist in Deutschland seit dem Urteil des LG München vom 20. Januar 2022 rechtswidrig. Das saubere Verfahren heißt Self Hosting, idealerweise über Fontsource.
Was bringt es wirklich, Webschriften zu optimieren?
Webschriften sind Design und Bremsklotz zugleich. Ohne sie klingt jede Website typografisch nach Arial 2003, mit ihnen laden Sie bei jeder neuen Besucherin ein bis zwei zusätzliche HTTP Anfragen und mehrere hundert Kilobyte Schriftdaten. Die gute Nachricht: Webschriften optimieren lohnt sich heute mehr denn je, weil Google die Ergebnisse sofort in Rankings verwandelt.
Der Rendering Pfad einer Website enthält drei Stellen, an denen Schriften direkt auf die gemessenen Nutzermetriken einwirken. Erstens: First Contentful Paint, also der Moment, in dem überhaupt sichtbarer Inhalt erscheint. Zweitens: Largest Contentful Paint, der Zeitpunkt, zu dem das größte Element geladen ist. Drittens: Cumulative Layout Shift, die Summe aller Verschiebungen, die nach dem ersten Rendern passieren. Alle drei Werte fließen seit 2021 in Googles Ranking Berechnung ein.
Zur zweiten Kraft, der Rechtsprechung: Das Landgericht München hat am 20. Januar 2022 entschieden, dass die dynamische Einbindung von Google Fonts ohne Einwilligung gegen die DSGVO verstößt. Der Kläger bekam 100 Euro Schadensersatz zugesprochen, die Entscheidung hat bis heute Bestand und löst regelmäßige Abmahnwellen aus. Sobald Sie Ihre Webschriften sauber lokal hosten, sind Sie auf der sicheren Seite.
🎬 Videoplatzhalter
Suchbegriff für YouTube: Core Web Vitals 2026 Webfonts erklärt
Gewünschter Inhalt: Einführung, wie Webschriften die drei Core Web Vitals beeinflussen
Bevorzugte Quellen: web.dev, Google Search Central, Fraunhofer
Welches Schriftformat brauchen Sie heute tatsächlich?
Der kürzeste ehrliche Satz zu diesem Kapitel lautet: WOFF2. Punkt. Sie brauchen 2026 kein Fallback Format mehr, kein TTF für ältere Browser, kein EOT für Internet Explorer. Internet Explorer ist seit Juni 2022 offiziell abgeschaltet, und jeder Browser, der WOFF2 nicht versteht, ist so alt, dass Ihre Website ohnehin anderweitig zerbricht.
Der Browser Support für WOFF2 liegt laut caniuse.com bei rund 98 Prozent weltweiter Nutzung. Chrome unterstützt das Format seit Version 36, Firefox seit 39, Edge seit 14, Opera seit 23. Safari 10 und 11 verstehen WOFF2 eingeschränkt und nur auf macOS Sierra oder neuer, ab Safari 12 ist der Support vollständig. Damit ist WOFF2 breiter verfügbar als jedes CSS Grid Feature, über das niemand mehr nachdenkt.
Die vier Formate im direkten Vergleich
| Format | Dateigröße (Referenz: Open Sans Regular) | Browser Support 2026 | Einsatzempfehlung |
|---|---|---|---|
| WOFF2 | ca. 25 KB | 98 % | Alleiniges Produktionsformat |
| WOFF | ca. 40 KB | 98 % | Nicht mehr nötig |
| TTF | ca. 100 KB | 99 % | Nur noch Quellmaterial für Konvertierung |
| EOT | ca. 110 KB | Nur IE bis IE11 | Tot seit Juni 2022 |
Ein häufiger Fehler, den Sie sofort aus Ihrem Stylesheet streichen können: Die alte Fallback Kette src: url('font.woff2') format('woff2'), url('font.woff') format('woff'), url('font.ttf') format('truetype'). Diese Kette erzwingt zwar nicht das Laden aller drei Dateien, sie bläst aber Ihr CSS auf und verführt Build Systeme dazu, alle drei Formate auszuliefern. Heute reicht src: url('font.woff2') format('woff2'). Fertig.
Ein zweiter hartnäckiger Mythos lautet, man müsse WOFF Dateien auf Serverseite per Gzip oder Deflate zusätzlich komprimieren. Das ist falsch. WOFF und WOFF2 sind bereits intern komprimiert, eine zweite Kompression kostet Serverleistung und bringt keine Bytes. Falls Ihre .htaccess noch Zeilen zur WOFF Kompression enthält, löschen Sie diese heute. Damit beginnt jede saubere Arbeit am Thema Webschriften optimieren.
Wie verhindern Sie Layout Shifts durch Webschriften?
Sobald der Browser Ihre Seite rendert, greift er zunächst auf eine Fallback Systemschrift zurück, weil die Webschrift noch lädt. Sobald die Webschrift eintrifft, tauscht der Browser sie aus. Genau in diesem Moment springt das Layout, weil Systemschrift und Webschrift unterschiedlich breit sind. Dieser Sprung heißt Cumulative Layout Shift, kurz CLS.
Die zentrale CSS Eigenschaft zur Steuerung dieses Verhaltens lautet font-display. Sie kennt vier Werte. auto überlässt die Entscheidung dem Browser und erzeugt unvorhersehbare Effekte. block blendet Text für bis zu drei Sekunden komplett aus, bis die Webschrift da ist. swap zeigt sofort die Fallback Schrift und tauscht dann aus, erzeugt aber genau den Sprung, den Sie vermeiden wollen. optional gibt dem Browser eine Zeitspanne von 100 Millisekunden und verwirft die Webschrift, falls sie nicht rechtzeitig da ist. Für reine Performance Optimierung ist optional die sauberste Wahl, für gestaltungsgetriebene Seiten führt swap kombiniert mit Fallback Matching zum besten Ergebnis.
Das Fallback Matching ist 2026 der wichtigste neue Hebel beim Webschriften optimieren. Chrome, Firefox und Safari unterstützen die CSS Eigenschaften size-adjust, ascent-override, descent-override und line-gap-override in der @font-face Deklaration einer System Fallback Schrift. Damit passen Sie die Metrik der Systemschrift so an, dass sie die gleiche Zeilenhöhe und Buchstabenbreite wie Ihre Webschrift erzeugt. Das Ergebnis: Der Austausch findet statt, das Layout springt aber nicht mehr, weil beide Schriften exakt gleich viel Platz belegen.
Die passenden Werte für über 1.000 Webschrift zu Systemschrift Kombinationen liefert kostenlos der Fallback Font Generator auf screenspan.net. Diese Feinarbeit gehört zum modernen Responsive Design genauso dazu wie Media Queries oder Container Queries.
Ein zusätzlicher Hebel ist <link rel="preload"> im Head Ihrer HTML Datei. Damit startet der Browser den Download der Webschrift vor dem Parsen des Stylesheets. Wichtig: Das Attribut crossorigin ist Pflicht, auch bei selbst gehosteten Fonts, weil Schriften als CORS Ressourcen behandelt werden.
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 separate Dateien. Variable Fonts packen all diese Varianten in eine einzige Datei und stellen die Gewichte stufenlos bereit.
Die Ersparnis liegt im zweistelligen Prozentbereich. Bei Roboto Flex reduziert sich das Dateigesamtgewicht von rund 230 Kilobyte (neun Einzeldateien WOFF2, Latin Subset) auf rund 170 Kilobyte (eine Variable Font Datei mit der Gewichtachse). Der Browser muss nur noch eine HTTP Anfrage stellen, die Kontrolle über Gewicht und Achsen erfolgt per CSS:
Der praktische Vorteil reicht über die Performance hinaus. Designer arbeiten bei Variable Fonts mit freien Achsen für Gewicht, Breite, Neigung und optische Größe. Ihre Typografie kann sich responsiv an Viewport Größen anpassen, ohne dass Sie mehrere Schriftdateien nachladen.
Drei Variable Fonts, die Sie sofort einsetzen können
Inter Variable von Rasmus Andersson ist die am häufigsten gewählte Variable Font für Web UI, kostenlos über Fontsource oder rsms.me/inter. Roboto Flex ist Googles offizielle Variable Font mit dreizehn Achsen, unter anderem für Gewicht, Breite und Optical Size. Source Sans 3 Variable von Adobe kommt unter der SIL Open Font License und eignet sich für klassische Body Copy.
Der Browser Support für Variable Fonts liegt laut caniuse.com bei über 95 Prozent weltweiter Nutzung, also auf demselben Niveau wie viele andere CSS Grundlagen. Sobald Sie heute eine neue Website starten und Webschriften optimieren wollen, ist eine Variable Font als primäre Schrift der Standardweg.
Wie binden Sie Webschriften DSGVO konform ein?
Hier wird Technik zu Rechtsfrage, und die Rechtslage in Deutschland ist seit vier Jahren eindeutig. 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. Dem Kläger wurden 100 Euro Schadensersatz zugesprochen. Die Begründung des Gerichts: Beim Abrufen der Schriften wird die IP Adresse an einen Google Server in den USA übertragen, und die IP Adresse ist nach der DSGVO ein personenbezogenes Datum.
Eine schöne Webschrift ist nichts wert, wenn sie Ihnen eine Abmahnung einbringt. Self Hosting ist 2026 kein Nice to have, sondern Grundhygiene.
— Michael Dobler, Herausgeber Dr. Web
Die saubere Lösung heißt Self Hosting. Sie laden die Schriften einmalig von Google Fonts oder einer anderen Quelle herunter und liefern sie von Ihrem eigenen Server aus. Keine Verbindung zu Google, keine IP Übertragung, keine Einwilligung nötig. Für die Durchoptimierung der gesamten Website liefert unser Artikel zu CSS optimieren zusätzliche Hebel.
Der schnellste Weg: Fontsource
Fontsource (fontsource.org) ist ein Open Source Projekt, das alle Google Fonts und viele weitere Schriften als NPM Module bereitstellt. Die Installation läuft über Ihr normales Build System:
Anschließend importieren Sie die Schrift in Ihrem Stylesheet oder Ihrer JavaScript Einstiegsdatei. Die Dateien liegen danach auf Ihrem Server, die Einbindung läuft über Ihr normales Asset Pipeline, und der Datenverkehr zu Google entfällt komplett. Fontsource stellt aktuell mehr als 1.500 Schriftfamilien bereit.
Für WordPress Nutzer bietet das Plugin OMGF (Optimize my Google Fonts) eine Ein Klick Lösung, die bestehende Google Fonts Einbindungen automatisch in lokale Dateien umwandelt. Die Datenschutzerklärung passen Sie entsprechend an, dann sind Sie rechtlich sauber und haben gleichzeitig Webschriften optimiert im Sinne der Ladezeit.
Nur eingebetteter Consent Banner? Sollten Sie Google Fonts unbedingt dynamisch einbinden wollen, müssten Sie vorab eine aktive Einwilligung einholen, also ein Consent Banner ausspielen, bevor die Verbindung zu Google startet. Das ist technisch möglich, führt aber zu einem kaputten Nutzererlebnis, weil die Seite entweder in Systemschrift lädt oder der Text drei Sekunden lang unsichtbar bleibt. Self Hosting ist in jedem Fall die pragmatischere Antwort.
Welche Subsetting Strategie lohnt sich?
Eine gute Schriftfamilie enthält mehrere hundert Glyphen, unter anderem kyrillische, griechische und vietnamesische Zeichen. Für eine deutsche Website laden Sie damit viele Bytes, die Sie nie rendern. Subsetting beschreibt den Vorgang, nur die tatsächlich benötigten Glyphen in die Schriftdatei zu packen.
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, jeweils mit einem unicode-range Attribut. Der Browser lädt nur die Datei, deren Range er für die aktuelle Seite benötigt:
Google Fonts nutzt dieses Prinzip intern, um für Besuche aus Deutschland nur die lateinische Subset Datei auszuliefern, nicht die kyrillische. Bei lokaler Einbindung ist diese Arbeitsweise übertragbar und gehört zum Standardrepertoire, sobald Sie mehrsprachige Webschriften optimieren.
Subsetting per Kommandozeile übernehmen Sie mit pyftsubset aus dem Python Paket fonttools oder mit glyphhanger von Zach Leatherman. Beide Werkzeuge sind seit 2014 etabliert und reduzieren eine Schriftdatei auf exakt die Zeichen, die Sie angeben. Ein typischer Befehl für deutsches Latein:
Das Ergebnis ist eine WOFF2 Datei, die nur Grundlatein plus deutsche Umlaute und Typografie Zeichen enthält.
Subsetting durch Fontsource erfolgt automatisch, weil Fontsource jede Schrift bereits in vorgefertigten Sprach Subsets anbietet. Sie importieren einfach @fontsource-variable/inter/latin-ext.css und erhalten das richtige Subset.
Icon Subsetting betrifft Schriften wie Font Awesome, die mehrere tausend Icons enthalten. Sie verwenden davon vielleicht zwanzig. IcoMoon oder Fontello liefern gezielt die Icons, die Sie angekreuzt haben, als eigene WOFF2 Datei. Der Größenvorteil ist gewaltig: Aus 180 Kilobyte werden 8 Kilobyte.
Mit welchen Tools messen Sie Ihren Font Performance?
Ohne Messung keine Optimierung. Vier Werkzeuge geben Ihnen die Daten, die Sie brauchen, und sie sind alle kostenlos. Ergänzend lohnt ein Blick auf die klassische Frontend Checkliste vor dem Go Live.
Vier Tools für den Messalltag
| Tool | Stärke | URL |
|---|---|---|
| PageSpeed Insights | Liefert die offiziellen Core Web Vitals Werte von Google, Desktop und Mobile getrennt | pagespeed.web.dev |
| Chrome DevTools Coverage | Zeigt, welche Schriftzeichen auf der aktuellen Seite tatsächlich genutzt werden | in Chrome: Strg+Shift+P, dann „Coverage“ |
| WebPageTest | Visualisiert den vollständigen Waterfall und zeigt, wann welche Schriftdatei lädt | webpagetest.org |
| Lighthouse | In Chrome DevTools integriert, liefert konkrete Empfehlungen zur Font Optimierung | Chrome DevTools, Reiter „Lighthouse“ |
Ein typischer Messlauf beim Webschriften optimieren beginnt mit PageSpeed Insights für den Ist Zustand, dann Chrome DevTools für die Detaildiagnose. Die Coverage Ansicht zeigt Ihnen pro Schriftdatei, wie viel Prozent der Glyphen ungenutzt sind. Sobald Sie dort mehr als 80 Prozent Ungenutztes sehen, lohnt Subsetting auf jeden Fall.
Für eine SEO Pflichtübung prüfen Sie zusätzlich, ob Ihre Website externe Font Ressourcen lädt. Öffnen Sie DevTools, Reiter „Netzwerk“, filtern Sie auf „Font“. Sollte dort eine Zeile mit fonts.gstatic.com oder fonts.googleapis.com erscheinen, binden Sie Google Fonts dynamisch ein und haben das DSGVO Problem aus Kapitel fünf.
Welche Fehler bremsen Ihre Webschriften aus?
Die meisten Performance Einbrüche gehen auf eine Handvoll wiederkehrender Fehler zurück. Hier die fünf häufigsten, die Sie in Ihrem CSS und HTML sofort erkennen und beheben können, sobald Sie Webschriften optimieren möchten.
Fehler 1: Fehlendes font-display
Ohne explizite Angabe wählt der Browser auto, und das Ergebnis ist unvorhersehbar. Jede @font-face Regel gehört um font-display: swap oder font-display: optional ergänzt. Ohne diese Zeile riskieren Sie, dass Ihr Text für bis zu drei Sekunden unsichtbar bleibt.
Fehler 2: Zu viele Schriftgewichte
Jedes zusätzliche Gewicht bedeutet eine weitere Schriftdatei. Eine Website mit Regular, Medium, Semibold, Bold und jeweils Italic lädt acht Dateien. Prüfen Sie Ihr Design: Brauchen Sie wirklich Medium UND Semibold? In den meisten Fällen reichen zwei Gewichte, bei Variable Fonts genügt eine einzige Datei für alle.
Fehler 3: Redundante Format Fallback Kette
Sie finden in vielen älteren Stylesheets Zeilen wie diese:
Diese Kette stammt aus der Zeit, als Internet Explorer 8 relevant war. Für 2026 gilt die einzeilige Variante:
Für ein grundsätzliches CSS Aufräumen bietet unser Leitfaden zu den CSS Grundlagen die passenden Werkzeuge.
Fehler 4: Fehlendes crossorigin beim Preload
Selbst bei selbst gehosteten Fonts behandelt der Browser die Ressource als CORS, weil Schriften prinzipiell über Origin Grenzen genutzt werden könnten. Ohne crossorigin führt der Preload zwei Anfragen durch statt einer, weil die erste nicht nutzbar war:
Fehler 5: Dynamische Google Fonts Einbindung
Sobald im HTML <link href="https://fonts.googleapis.com/css..."> auftaucht, schicken Sie jede Besucher IP an Google. Rechtlich haftbar, technisch langsamer als Self Hosting, und in 2026 einfach nicht mehr zeitgemäß. Ersetzen Sie diese Zeile durch 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 in Ihr Projekt einbinden. Sie enthält mindestens den Namen der Schrift, die Quellenangabe und bei Bedarf weitere Eigenschaften wie font-display oder unicode-range. Ohne diese Regel erkennt der Browser Ihre Webschrift nicht.
CLS (Cumulative Layout Shift)
Cumulative Layout Shift (CLS) misst die Summe aller unerwarteten Layoutverschiebungen, die nach dem ersten Rendern einer Seite stattfinden. Google empfiehlt einen Wert unter 0,1. Webschriften sind einer der Haupttreiber schlechter CLS Werte, weil der Wechsel von Fallback zu Webschrift das Layout verschiebt.
DSGVO
Die Datenschutz Grundverordnung (DSGVO) regelt in der EU den Umgang mit personenbezogenen Daten. Für Webschriften relevant, weil die IP Adresse ein personenbezogenes Datum ist. Dynamische Einbindung von Google Fonts ohne Einwilligung verstößt seit dem LG München Urteil vom Januar 2022 gegen die DSGVO.
FCP (First Contentful Paint)
First Contentful Paint (FCP) markiert den Zeitpunkt, zu dem erstmals Inhalt auf dem Bildschirm sichtbar wird. Langsam ladende Webschriften mit font-display: block verzögern FCP. Empfohlen ist ein Wert unter 1,8 Sekunden.
font-display
font-display steuert das Verhalten des Browsers während des Ladens einer Webschrift. Die vier Werte auto, block, swap und optional bestimmen, ob zuerst eine Fallback Schrift gezeigt wird und wie lange. Pflichteigenschaft in jeder @font-face Regel.
Fontsource
Fontsource (fontsource.org) ist eine Open Source Bibliothek, die über 1.500 Schriftfamilien als NPM Module bereitstellt. Über Fontsource binden Sie Google Fonts und andere Schriften lokal ein, ohne selbst Dateien herunterladen und konvertieren zu müssen.
LCP (Largest Contentful Paint)
Largest Contentful Paint (LCP) misst, wann das größte sichtbare Element im Viewport fertig geladen ist. Oft ist das ein Header mit Überschrift, die eine Webschrift nutzt. Eine langsame Schrift verzögert LCP direkt. Empfohlen ist ein Wert unter 2,5 Sekunden.
Preload
Preload ist eine HTML Direktive (<link rel="preload">), mit der Sie dem Browser sagen, eine Ressource mit hoher Priorität und früh zu laden. Für kritische Webschriften sinnvoll, um FCP und LCP zu beschleunigen. Mit crossorigin Attribut verwenden.
size-adjust
size-adjust ist eine CSS Eigenschaft innerhalb einer @font-face Regel, die die Glyphengröße einer Schrift prozentual skaliert. Zusammen mit ascent-override, descent-override und line-gap-override ermöglicht sie exaktes Fallback Matching, sodass der Schriftwechsel keinen Layout Shift verursacht.
Subsetting
Subsetting bezeichnet die Reduktion einer Schriftdatei auf die tatsächlich benötigten Glyphen. Aus einer 180 Kilobyte großen Variable Font wird per Subsetting eine 40 Kilobyte Datei, weil kyrillische, griechische und vietnamesische Zeichen entfernt werden. Werkzeuge: pyftsubset, glyphhanger.
unicode-range
unicode-range ist ein CSS Attribut in @font-face Regeln, das dem Browser mitteilt, für welche Zeichen eine Schriftdatei zuständig ist. Der Browser lädt eine Datei nur dann, sobald die aktuelle Seite Zeichen aus dem angegebenen Bereich enthält. Grundlage für sauberes Multi Language Subsetting.
Variable Font
Eine Variable Font packt mehrere Gewichte, Breiten und weitere Achsen in eine einzige Schriftdatei. Statt neun separater Dateien für verschiedene Gewichte laden Sie nur eine Datei und steuern die Darstellung über font-variation-settings in CSS. Empfohlen als Standardansatz seit 2023.
WOFF2
Web Open Font Format 2 (WOFF2) ist das 2014 als W3C Working Draft vorgestellte Schriftformat für das Web, seit 1. März 2018 offizielle W3C Recommendation. WOFF2 komprimiert Schriftdaten um rund 30 Prozent stärker als WOFF und wird von über 98 Prozent der Browser unterstützt. Einziges relevantes Produktionsformat 2026.
FAQ: Wie optimieren Sie Webschriften 2026 richtig?
Reicht WOFF2 als alleiniges Schriftformat für 2026?
Ja. Der Browser-Support für WOFF2 liegt laut caniuse.com bei über 98 Prozent weltweiter Nutzung. Internet Explorer ist seit Juni 2022 abgeschaltet, alle modernen Browser verstehen WOFF2 seit mindestens 2016. Zusätzliche Fallbacks auf WOFF, TTF oder EOT sind 2026 überflüssig und blähen nur das Stylesheet auf.
Ist Google Fonts in Deutschland verboten?
Nein, verboten ist nur die dynamische Einbindung über Google Server ohne Einwilligung der Besucher. Das Landgericht München hat am 20. Januar 2022 (Az. 3 O 17493/20) entschieden, dass dieser Fall gegen die DSGVO verstößt, und 100 Euro Schadensersatz zugesprochen. Laden Sie Google Fonts lokal herunter oder nutzen Sie Fontsource, dann ist die Rechtslage sauber.
Was ist der Unterschied zwischen Variable Fonts und klassischen Schriften?
Eine klassische Schriftfamilie besteht aus mehreren Dateien, typischerweise für Regular, Italic, Bold und weitere Gewichte. Eine Variable Font packt all diese Varianten in eine einzige Datei und stellt die Gewichte stufenlos bereit. Ergebnis: weniger HTTP-Anfragen, kleineres Gesamtgewicht, flexiblere Typografie per CSS-Eigenschaft font-variation-settings.
Welcher font-display-Wert ist der beste?
Für gestaltungsgetriebene Seiten ist swap die übliche Wahl, weil Text sofort sichtbar ist. Für performancekritische Seiten ist optional besser, weil der Browser die Webschrift verwirft, falls sie nicht innerhalb von 100 Millisekunden geladen ist. Die Entscheidung hängt davon ab, ob Ihnen gestalterische Treue oder Ladezeit wichtiger ist.
Wie viele Schriftgewichte sollte eine Website maximal laden?
Zwei bis drei Einzelgewichte reichen für die allermeisten Websites aus, typischerweise Regular und Bold, bei Bedarf zusätzlich ein Medium oder Semibold. Jedes weitere Gewicht bedeutet eine weitere Schriftdatei. Mit einer Variable Font umgehen Sie das Problem komplett, weil eine einzige Datei alle Gewichte abdeckt.
Bringt Subsetting beim Webschriften optimieren für eine deutsche Website wirklich viel?
Ja. Eine vollständige Latin-Extended-Schriftdatei enthält rund 800 Glyphen, ein deutsches Subset nur etwa 220. Die Datei wird dadurch rund 40 Prozent kleiner. Bei Icon-Schriften wie Font Awesome liegt die Ersparnis noch höher, oft bei 90 Prozent und mehr, weil Sie typischerweise nur 20 von mehreren tausend Icons nutzen.
Quellen
- Landgericht München I | Urteil vom 20.01.2022, Az. 3 O 17493/20 | https://www.ra-plutte.de/lg-muenchen-dynamische-einbindung-google-web-fonts-ist-dsgvo/ | besucht am 22.04.2026
- Can I Use | WOFF 2.0 Browser Support Table | https://caniuse.com/woff2 | besucht am 22.04.2026
- W3C | WOFF 2.0 Recommendation vom 01.03.2018 | https://www.w3.org/press-releases/2018/woff2-rec/ | besucht am 22.04.2026
- web.dev (Google) | Webschriftarten optimieren | https://web.dev/learn/performance/optimize-web-fonts | besucht am 22.04.2026
- Fontsource | Open Source Web Font Library | https://fontsource.org | besucht am 22.04.2026
- MDN Web Docs | @font-face CSS Property Reference | https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | besucht am 22.04.2026
- Screenspan | Fallback Font Generator | https://screenspan.net/fallback | besucht am 22.04.2026
Änderungshistorie
- 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.
8 Kommentare
Für mich ist das Thema im Moment von grossem Interesse. Vielen Dank!
Besten Dank für den Beitrag,
hier noch eine hilfreiche Ergänzung für alle, die gerne bis ins letzte Detail optimieren.
Wer einen sehr umfangreichen Schriftsatz verwendet und sich sicher ist, dass bestimmte Zeichen nicht benötigt werden, kann die Schrift mit dem FF Subsetter etwas „schrumpfen“.
http://www.subsetter.com/
Gruß
Mirco
Wenn ich eine Schriftart in der CSS hinterlege, dann werden in dieser mehrere Dateiformate hinterlegt. Also wenn ich die Schriftart beispielsweise über den im Artikel erwähnten Generator Erstelle.
Holt sich der Browser dann eigentlich immer nur eine Datei bzw. ein Dateiformat (zum Beispiel nur WOFF) oder werden alle in der CSS für die Schriftart hinterlegten Dateien geladen?
WOFF-Dateien sind bereits komprimiert, daher ist eine serverseitige Komprimierung kontraproduktiv und führt eher zu längerer Ladezeit.
Wie ist es mit der Lizensierung von Schriften, die ich selbst in WOFF/WOFF2 umwandle? Ich denke mal, eine normale Lizenz bildet diese Nutzung nicht ab und das kann Ärger geben …
Da muss man sich natürlich die jeweiligen Lizenzbedingungen anschauen. Aber bei MyFonts erworbene Webschriften lassen sich mittlerweile auch als WOFF2 herunterladen.
Werden eigentlich alle möglichen Formate, die in der CSS hinterlegt sind, geladen oder holt sich der Browser nur eine einzige Schriftdatei? Also beispielsweise nur WOFF2, wenn der Browser dieses Format unterstützt?
Vielen Dank für diesen sehr guten Beitrag über Schriften!