@font-face-CSS-Generator
@font-face-Code für WOFF2, WOFF und TTF aus Schriftfamilie, Schnitt und Pfad erzeugen
Statt die @font-face-Regel bei jeder Webfont-Einbindung von Hand zu tippen, füllen Sie hier einfach ein Formular aus. Sie geben Schriftname, Schriftschnitt, Stil und die Pfade zu Ihren WOFF2-, WOFF- und TTF-Dateien an – der browserkompatible Standard-CSS-Code entsteht dabei in Echtzeit. Die gesamte Verarbeitung findet im Browser statt, nichts wird an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Wählen Sie den Namen der Schriftfamilie sowie Schriftschnitt (Weight) und Stil (Normal/Kursiv).
- Geben Sie die Pfade (URLs) zu den Dateien im Format WOFF2, WOFF und TTF ein.
- Sehen Sie sich den darunter in Echtzeit erzeugten @font-face-CSS-Code an.
- Übernehmen Sie den Code per Kopieren-Schaltfläche direkt in Ihr Stylesheet.
FAQ
- Konvertiert das Tool Schriftdateien tatsächlich von TTF nach WOFF?
- Nein, eine echte Formatkonvertierung findet nicht statt. Sie geben die Pfade zu bereits vorhandenen WOFF2-, WOFF- und TTF-Dateien an, und das Tool erzeugt den passenden Standard-@font-face-Code, der diese einbindet.
- Warum sollte ich WOFF2, WOFF und TTF gemeinsam angeben?
- Weil die Browser unterschiedliche Formate unterstützen, ist eine Fallback-Kette gängige Webpraxis. Moderne Browser nutzen das kompakteste Format WOFF2, ältere Umgebungen greifen der Reihe nach auf WOFF und TTF zurück.
- Kann ich den erzeugten Code unverändert verwenden?
- Ja. Der Code entspricht dem Standardaufbau inklusive font-display: swap und lässt sich ohne Anpassung in Ihre CSS-Datei einfügen.