devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Website-Check

Webfont-Generator — TTF & OTF zu WOFF2 mit CSS

Verwandle Desktop-Schriften in schnelle Webfonts: Konvertiere sie in WOFF2 und WOFF, behalte nur die Zeichen, die du brauchst, und lade alles mit fertigem @font-face-CSS herunter. Deine Schriften werden nie hochgeladen.

Aktualisiert am
Prüfe zuerst deine Lizenz. Schriften sind durch Lizenzen geschützt, und viele erlauben keine Web-Nutzung oder Konvertierung, auch wenn du sie gekauft hast. devpack prüft Lizenzen nicht und haftet nicht dafür, wie du deine Schriften nutzt.
Schriftdateien hier ablegen oder zum Auswählen klicken
TTF, OTF, WOFF oder WOFF2 · Ganze Schriftfamilie hinzufügen · Wird in deinem Browser verarbeitet, nichts wird hochgeladen
Füge oben deine Dateien hinzu. Ergebnisse, Vorschauen und Downloads erscheinen hier.

Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

So nutzt du: Webfont-Generator

  1. Ziehe eine oder mehrere TTF- oder OTF-Dateien in das Feld. Füge alle Schnitte einer Familie gemeinsam hinzu.
  2. Prüfe den Lizenzhinweis bei jeder Schrift. Wähle deine Ausgabeformate und optional die Zeichen, die du behalten willst.
  3. Bestätige, dass du die Schrift konvertieren darfst, und klicke auf Webfonts erzeugen.
  4. Vergleiche die Größen, teste die Vorschau und klicke auf ZIP herunterladen. Lade den Ordner fonts hoch und füge das CSS in deine Website ein.

Prüfe zuerst deine Schriftlizenz

Schriften sind Software, und ihre Lizenzen bestimmen, was du damit tun darfst. Viele kommerzielle Lizenzen gelten nur für die Desktop-Nutzung oder verlangen extra Geld für die Web-Nutzung, und manche verbieten das Konvertieren der Datei ganz. Das kann auch gelten, wenn du die Schrift gekauft hast. Offene Lizenzen wie die SIL Open Font License erlauben die Web-Nutzung meist, haben aber eigene Bedingungen. Lies deine Lizenz, bevor du konvertierst. devpack prüft Lizenzen nicht, und du bist allein dafür verantwortlich, wie du deine Schriften und die erzeugten Dateien nutzt.

Welches Schriftformat sollte ich nutzen?

WOFF2 ist für fast jede Website die richtige Wahl. Es hat die beste Kompression und funktioniert in allen modernen Browsern. Nimm WOFF nur dazu, wenn du sehr alte Browser unterstützen musst. TTF und OTF sind Desktop-Formate und meist deutlich größer.

Was ist Font-Subsetting?

Eine Schrift kann Tausende Zeichen enthalten, die deine Website nie anzeigt. Subsetting entfernt sie, was die Dateigröße stark senken und deine Seiten beschleunigen kann. Wenn du Zeichensätze auswählst, erhält das CSS außerdem einen unicode-range. Browser laden die Schrift dann nur, wenn eine Seite sie braucht. Behalte alle Sprachen, die deine Website nutzt, denn entfernte Zeichen fallen auf eine andere Schrift zurück.

Was steckt im ZIP?

  • Ein Ordner fonts mit deinen konvertierten Dateien.
  • stylesheet.css mit einer @font-face-Regel pro Schrift, inklusive Gewicht und Stil.
  • demo.html, eine Seite, die jede Schrift in Aktion zeigt.
  • FONT-INFO.txt mit den Copyright- und Lizenzangaben, die jede Schrift meldet.

Expertenoptionen

  • Variable Schriften: Verenge eine Achse, entferne sie oder erzeuge statische Schnitte wie 400 und 700. Das CSS erhält den passenden Gewichtsbereich.
  • OpenType-Features: Behalte den Standardsatz, behalte alle oder wähle genau die gewünschten aus.
  • Vertikale Metriken: Gleiche den Zeilenabstand plattformübergreifend an oder setze eigene Werte.
  • Angepasste Ersatzschrift: Fügt eine größenangepasste Systemschrift hinzu, damit sich der Text beim Laden deines Webfonts weniger verschiebt. Das verbessert deinen Layout-Shift-Wert.
  • Code: Erhalte @font-face-Regeln, ein Nutzungsbeispiel, Preload-Tags oder die Tailwind-CSS-Einrichtung.

Welcher font-display-Wert ist der beste?

swap zeigt den Text sofort in einer Ersatzschrift und tauscht ihn aus, sobald deine Schrift geladen ist. optional vermeidet diesen Austausch und den Layout-Shift, aber bei langsamer Verbindung wird deine Schrift womöglich nie angezeigt. Um noch schneller zu werden, lade deine Hauptschrift mit einem link rel="preload"-Tag vor und teste die Seite mit dem Page Speed Test.

Webfonts in Webflow nutzen

Lade die WOFF2-Dateien herunter und lade sie unter Site settings → Fonts → Custom fonts hoch. Webflow erstellt das CSS für dich. Brauchst du eigenen Code in deinem Projekt? Das Tool HTML & CSS zu Webflow kann helfen.

Auch gesucht als: webfont erstellen, ttf zu woff2, otf zu woff2, font subsetter, font-face css generator, webfont konvertieren, schriftart zu webfont.

Passende Tools zu: Webfont-Generator

  • Bildkompressor — Reduziere Fotos und Grafiken um bis zu 90 %, je nach Bild und Einstellungen meist ohne sichtbaren Qualitätsverlust.
  • CSS Minifier — Füge ein Stylesheet ein, um es sofort zu verkleinern.
  • CSS-Buttons — Wähle aus 24 animierten CSS-Buttons: Füllungen, Rahmen, Glows, Glanzeffekte und 3D-Druckeffekte.
  • CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.

Häufige Fragen

Darf ich jede Schrift konvertieren?
Nein. Das hängt von der Lizenz der Schrift ab, und viele kommerzielle Schriften erlauben es nicht. Du musst die Schrift besitzen oder eine Lizenz haben, die Konvertierung und Web-Nutzung erlaubt. devpack prüft das nicht für dich, und du bist für deine Nutzung voll verantwortlich.
Was passiert, wenn eine Schrift als eingeschränkt markiert ist?
Die eigenen Einstellungen der Schrift besagen, dass ihr Inhaber das Einbetten nicht erlaubt. Du kannst nur weitermachen, wenn du bestätigst, dass du die Erlaubnis des Inhabers hast.
Prüft devpack, ob meine Schrift lizenziert ist?
Nein. Das Tool zeigt nur, was die Schriftdatei über sich selbst angibt, und diese Angaben können fehlen oder falsch sein. Prüfe immer deine tatsächliche Lizenz.
Werden meine Schriften hochgeladen?
Nein. Alles läuft in deinem Browser, deine Schriftdateien bleiben also auf deinem Gerät.
Ist das eine Alternative zu Font Squirrel?
Es erledigt eine ähnliche Aufgabe, mit einem großen Unterschied: Deine Schrift wird in deinem Browser konvertiert und nicht an einen Server gesendet. Außerdem unterstützt es variable Schriften, angepasste Ersatzschriften und Tailwind CSS.
Sollte ich trotzdem noch WOFF verwenden?
Selten. WOFF2 funktioniert in allen modernen Browsern, daher braucht die meisten Websites nur dieses Format.
Warum fehlen nach der Konvertierung manche Zeichen?
Sie wurden durch deine Zeichenauswahl entfernt oder waren in der Schrift nie enthalten. Wähle Alle behalten oder füge die fehlenden Zeichen hinzu und erzeuge die Webfonts erneut.
Warum gibt es keine EOT- oder SVG-Ausgabe?
Diese Formate brauchten nur sehr alte Browser. Moderne Browser nutzen WOFF2.
Kann ich Webfont-Generator als Web-App installieren und offline nutzen?
Ja. Webfont-Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

Ähnliche Tools

localBildkompressorReduziere Fotos und Grafiken um bis zu 90 %, je nach Bild und Einstellungen meist ohne sichtbaren…localCSS MinifierFüge ein Stylesheet ein, um es sofort zu verkleinern. Du siehst die Originalgröße und die minifizierte…localHTML & CSS zu WebflowFüge HTML und das passende CSS ein, klicke auf Copy to Webflow und füge im Designer ein. Du bekommst echte…localCSS-ButtonsWähle aus 24 animierten CSS-Buttons: Füllungen, Rahmen, Glows, Glanzeffekte und 3D-Druckeffekte. Lege die…apiSeitengeschwindigkeits-TestStarte Google Lighthouse für jede URL, mobil oder am Desktop. Sieh Performance-, Barrierefreiheits-,…localCSS-Animation-GeneratorGestalte CSS-Animationen auf einer echten Keyframe-Timeline. Starte mit über 50 Vorlagen, springe durch…