TTF-zu-WOFF2-Konverter

Über: TTF-zu-WOFF2-Konverter

Der TTF-zu-WOFF2-Konverter wandelt TrueType-Desktopschriften in WOFF2 um, das Webfont-Format, das alle modernen Browser bevorzugen. WOFF2 komprimiert die Schrift mit Brotli und einer speziellen Glyphen-Transformation, sodass eine typische TTF-Datei 50–70 % kleiner wird, ohne ein einziges Zeichen zu verlieren. Kleinere Schriften laden schneller, der Text erscheint früher, und Largest Contentful Paint sowie die übrigen Core Web Vitals profitieren.

Ziehen Sie eine Datei oder eine ganze Familie hinein, und das Tool erstellt die WOFF2-Dateien samt @font-face-Regeln, die Gewicht, Stil und font-display: swap bereits enthalten. Laden Sie die Schriften neben Ihr Stylesheet, fügen Sie das CSS ein und laden Sie keine Schriften mehr von fremden Servern. Alles läuft im Browser mit Googles offiziellem WOFF2-Encoder, Ihre Schriften werden nie hochgeladen.

Schriften richtig selbst hosten

Schriften auf der eigenen Website zu hosten, statt sie von einem anderen Dienst zu laden, kann Seiten schneller machen und vermeidet, dass Daten deiner Besuche an Dritte gehen.

Schritte

1. Füge die TTF-Dateien jedes Schnitts hinzu, den du wirklich nutzt. Jeder zusätzliche Schnitt kostet Ladezeit, lass also weg, was du nicht brauchst.
2. Lade die WOFF2-Dateien herunter und auf deine Website hoch.
3. Kopiere die @font-face-Regeln. Sie enthalten bereits font-display: swap, sodass Text sofort in einer Ersatzschrift erscheint, während die Webschrift lädt.

Beispiel

body { font-family: "MeineSchrift", Arial, sans-serif; }

Eine typische TTF mit 150–250 KB wird zu einer WOFF2 mit 60–100 KB. Schriften mit vielen Sprachen wie Arabisch, Devanagari oder Chinesisch sind deutlich größer. Nutze nur die Schriften, die deine Website braucht.

So funktioniert’s

1. Ziehen Sie Ihre TTF-Dateien in den Upload-Bereich oder klicken Sie, um sie auszuwählen.
2. Warten Sie eine Sekunde, bis jede Schrift zu WOFF2 komprimiert ist.
3. Laden Sie die WOFF2-Dateien einzeln oder gemeinsam als ZIP herunter.
4. Kopieren Sie das @font-face-CSS in Ihr Stylesheet.

Häufige Fragen