@font-face-Webschrift-Generator
Variable Schriftarten, WOFF2 und CSS mit einem Klick
Ziehen Sie Ihre TTF, OTF, WOFF oder WOFF2-Dateien — einschließlich variabler Schriftarten — hinein, wählen Sie Ihre Einstellungen und laden Sie ein bereit zum Hosten Paket mit WOFF2, WOFF, einem vollständigen stylesheet.css und einer Live-Demo-Seite herunter.
Schriftarten hierher ziehen oder klicken, um zu durchsuchen
TTF, OTF, WOFF, WOFF2 und variable Schriftarten — mehrere Dateien erlaubt
Ausgewählte Schriftarten
Konfigurationseinstellungen
Dies ist der Name, den du in deinem CSS verwenden wirst, wie font-family: 'MeinName';. Leer lassen, um den ursprünglichen Familiennamen jeder Schriftart aus der Datei beizubehalten.
Steuert, wie der Text angezeigt wird, während die Webfont geladen wird.
Pfad, der in url(...) im generierten Stylesheet verwendet wird.
Tipp: Drücke Strg+Enter, um zu generieren.
Dein Webfont-Paket ist bereit
ZIP enthält: konvertierte Schriftarten, stylesheet.css und eine Live demo.html.
100 % clientseitig
Die Konvertierung erfolgt vollständig in deinem Browser mit WebAssembly. Deine Schriftarten werden niemals hochgeladen.
Variable Schriftarten & alle Formate
TTF, OTF, WOFF und WOFF2 hinein — optimiertes WOFF2 heraus, mit vollständiger Unterstützung für variable Schriftartenachsen (wght, wdth, slnt, ital).
Produktionsbereite Ausgabe
Versendet ein stylesheet.css mit der richtigen Schriftanzeige, optional local() und einer demo.html, sodass Sie das Paket direkt in Ihr Projekt einfügen können.
Was ist ein Webfont-Generator?
Ein Webfont-Generator verwandelt Desktop- oder heruntergeladene Schriftdateien (TTF, OTF, WOFF, WOFF2 — einschließlich moderner variabler Schriftarten) in die Formate, die Browser über das Web laden können — hauptsächlich WOFF2 heute, mit WOFF als Legacy-Fallback — und erzeugt passende CSS @font-face-Deklarationen, sodass Sie die Typografie Ihrer Website selbst hosten können.
Warum Schriftarten selbst hosten?
Das Selbst-Hosting gibt Ihnen die volle Kontrolle über Leistung, Datenschutz und Zuverlässigkeit. Es gibt keine Drittanbieteranfrage an Google Fonts (hilfreich für die DSGVO), keine zusätzliche DNS-Abfrage, Sie können die Datei vorladen, und Sie entscheiden genau, welche Gewichte, Stile und Achsen mit Ihrer Seite versendet werden.
Wie die Konvertierung funktioniert
WOFF2 umschließt Ihre TTF/OTF-Konturen in einem Brotli-komprimierten Container, der speziell für das Web entwickelt wurde — typischerweise 30 % kleiner als WOFF und über 50 % kleiner als das rohe TTF. WOFF ist ein älterer zlib-komprimierter Wrapper, der als Fallback für sehr alte Browser erhalten bleibt. Unser Generator verwendet Googles offiziellen WOFF2-Encoder und -Decoder, der für WebAssembly kompiliert wurde, sodass die Konvertierung lokal in Ihrem Browser erfolgt. Fügen Sie ein WOFF2 ein, das Sie von Google Fonts heruntergeladen haben, und wir dekodieren es transparent zurück in einen sfnt-Container, bevor wir es erneut kodieren — Sie müssen niemals nach dem ursprünglichen TTF suchen.
Was du im Paket erhältst
- Schriften in WOFF2 (und optional WOFF/TTF) für jedes hochgeladene Gesicht — einschließlich variabler Schriftarten, die als eine kleine Datei beibehalten werden.
- Ein vollständiges stylesheet.css mit einer @font-face-Regel pro Datei, den richtigen format() Hinweisen, Gewichtbereichen, Stil, Streckung, Anzeige und optional local().
- Eine demo.html-Seite, damit Sie jedes Gewicht, jeden Stil und jede Achse in mehreren Größen vor der Veröffentlichung anzeigen können.
- Optionale Base64-Einbettung, um die Schriftart inline in deinem CSS für Offline- oder Einzeldatei-Szenarien zu versenden.
Datenschutz & Lizenzierung
Dateien verlassen niemals dein Gerät — alles wird in deinem Browser verarbeitet. Stelle immer sicher, dass die Lizenz deiner Schriftart das Einbetten von Webfonts erlaubt, bevor du sie auf deiner Website veröffentlichst.