Webfont-Auslieferungsgrößen-Optimierer

• Sofortige Analyse der Webfont-Auslieferung: Analysieren Sie @font-face-CSS-Deklarationen sofort im Browser – ohne Server-Upload, ohne Cloud-Verarbeitung. Unser Optimierer erkennt fehlendes WOFF2, Legacy-Formate und font-display-Probleme in Echtzeit.
• Sicherer Online-Optimierer für Webfont-Auslieferung: Ihr CSS-Quellcode verlässt beim Analysieren nie Ihr Gerät. Verarbeitung zu 100 % auf dem Client bedeutet vollständige Privatsphäre – kein Cloud-Speicher, keine Server-Logs, keine Offenlegung von Font-URLs.
• Webfont-Auslieferungs-Optimierer – ohne Installation: Analysieren und optimieren Sie @font-face-Deklarationen direkt im Browser, ohne Software-Downloads, Plugins und Konto. Funktioniert auf jedem modernen Browser und Betriebssystem.
• Optimierte CSS-Ausgabe mit einem Klick: Der Optimierer erzeugt einen bereinigten @font-face-CSS-Block – EOT- und SVG-Formate entfernt, font-display ergänzt, local()-Fallbacks ergänzt – bereit zum Kopieren oder Herunterladen als .css-Datei.

• Font-Optimierung für Core Web Vitals: Analysieren Sie @font-face-Deklarationen, um fontbedingte LCP- und CLS-Probleme zu beheben. Fehlendes font-display: swap verursacht unsichtbaren Text (FOIT), der LCP verzögert; der Optimierer erkennt und behebt das automatisch.
• Modernisierung von Legacy-Font-Stacks: Modernisieren Sie alte @font-face-Stacks mit EOT-, SVG- und TTF-Formaten. Der Optimierer entfernt Legacy-Formate, stellt sicher, dass WOFF2 an erster Stelle der src-Liste steht, und erzeugt sauberes, modernes CSS.
• Font-Audit im Designsystem: Prüfen Sie die @font-face-Deklarationen in Ihrem Designsystem oder Ihrer Komponentenbibliothek. Der Optimierer findet fehlendes WOFF2, uneinheitliche font-display-Werte und Möglichkeiten für variable Fonts.
• DSGVO-konformes Font-Selbsthosting: Erkennen Sie Google-Fonts-CDN-URLs in @font-face-Deklarationen, die gegen die DSGVO verstoßen können, indem Nutzer-IPs an Google gehen. Der Optimierer markiert sie und empfiehlt Selbsthosting-Alternativen.
• Mehrsprachige Font-Auslieferung: Analysieren Sie unicode-range-Deklarationen für mehrsprachige Font-Stacks. Der Optimierer erkennt fehlende unicode-range-Eigenschaften, die dazu führen, dass alle Font-Subsets auch bei einsprachigen Seiten geladen werden.
• Planung der Migration zu variablen Fonts: Identifizieren Sie Schriftfamilien mit 4 oder mehr Schnitt-Deklarationen, die von einem variablen Font profitieren würden. Der Optimierer markiert sie und empfiehlt diesen Ansatz zur Reduzierung von HTTP-Anfragen.

Webfont-Auslieferungsoptimierung ist der Prozess, @font-face-CSS-Deklarationen so zu konfigurieren, dass die Font-Downloadgröße minimiert, HTTP-Anfragen reduziert und render-blocking verhindert wird. Die Schlüsselfaktoren sind: Formatauswahl (WOFF2 ist 30–50 % kleiner als WOFF), font-display (verhindert unsichtbaren Text während des Ladens), unicode-range (ermöglicht Subsetting pro Schriftsystem) und local()-Fallback (nutzt Systemfonts, wenn verfügbar). Unser Webfont-Auslieferungsgrößen-Optimierer parst Ihr @font-face-CSS, erkennt all diese Probleme und erzeugt optimierte CSS-Ausgabe.

1. 1 @font-face-CSS einfügen: Fügen Sie beliebiges CSS mit @font-face-Deklarationen ein – aus Ihrem Stylesheet, einem Google-Fonts-Embed oder einem Font-Anbieter. Die gesamte Analyse erfolgt lokal im Browser – Ihr CSS und die Font-URLs verlassen Ihr Gerät nie.
2. 2 Auf „Font-Auslieferung analysieren“ klicken: Der Optimierer parst jeden @font-face-Block und extrahiert font-family, font-weight, font-style, font-display, unicode-range und alle src-Einträge. Er erkennt fehlendes WOFF2, Legacy-Formate (EOT, SVG), fehlendes font-display und DSGVO-Probleme.
3. 3 Empfehlungen prüfen und optimiertes CSS herunterladen: Die Ergebnisse zeigen Format-Badges je Deklaration, Optimierungsempfehlungen mit Korrekturen und ein bereinigtes CSS – EOT/SVG entfernt, font-display ergänzt, local()-Fallbacks ergänzt – bereit zum Kopieren oder Herunterladen.

• WOFF2-Format: WOFF2 nutzt Brotli-Kompression und ist 30–50 % kleiner als WOFF. Es wird von allen modernen Browsern unterstützt (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Verwenden Sie WOFF2 immer als ersten src-Eintrag.
• font-display-Eigenschaft: Steuert, wie der Browser das Font-Laden handhabt. swap zeigt sofort Ersatztext (am besten für Fließtext); optional nutzt den Font nur, wenn er innerhalb von 100 ms lädt (am besten für unkritische Fonts).
• Legacy-Formate (EOT, SVG): EOT ist nur für IE8 und älter nötig (unter 0,1 % Marktanteil). SVG-Fonts sind veraltet. Ihre Entfernung reduziert die CSS-Komplexität und vermeidet unnötige HTTP-Anfragen in alten Browsern.
• unicode-range: Ermöglicht Font-Subsetting pro Schriftsystem – der Browser lädt die Datei nur für die tatsächlich verwendeten Schriftsysteme. Entscheidend für mehrsprachige Websites mit großen CJK- oder Multi-Script-Familien.

Der Webfont-Auslieferungsgrößen-Optimierer analysiert nur CSS-Deklarationen – er lädt keine tatsächlichen Fontdateien herunter und misst sie nicht. Geschätzte Größen basieren auf typischen Werten je Format (WOFF2 ~18 KB, WOFF ~28 KB, TTF ~45 KB für ein Latin-Subset). Die tatsächlichen Größen hängen von der Glyphenzahl, OpenType-Features und dem Subsetting ab. Der Optimierer kann nicht feststellen, ob WOFF2-Dateien tatsächlich unter den angegebenen URLs verfügbar sind – prüfen Sie die URLs im Netzwerk-Tab Ihres Browsers.