@font-face CSS-Generator
WOFF2/WOFF/TTF @font-face-Code sofort aus Ihren Schriftangaben erstellen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Dieses Tool erstellt die @font-face-Regel automatisch, statt sie jedes Mal von Hand zu schreiben. Geben Sie Schriftfamilie, Schriftschnitt, Stil sowie die Pfade zu Ihren WOFF2-, WOFF- und TTF-Dateien ein, und Sie erhalten sofort einen browserkompatiblen CSS-Code — die gesamte Verarbeitung findet lokal im Browser statt, ohne Datenübertragung an einen Server.
Anleitung
- Schriftfamilie, Schriftschnitt (Weight) und Stil (Normal/Italic) auswählen.
- Die Datei-URLs für WOFF2, WOFF und TTF eintragen.
- Den unten in Echtzeit erzeugten @font-face-CSS-Code prüfen.
- Mit Copy Code den Code direkt ins Stylesheet einfügen.
FAQ
- Konvertiert dieses Tool tatsächlich TTF-Dateien in WOFF?
- Nein, es findet keine Formatkonvertierung statt. Es nimmt lediglich die Pfade zu bereits vorhandenen WOFF2-, WOFF- und TTF-Dateien und erzeugt daraus den passenden @font-face-CSS-Code.
- Warum muss ich WOFF2, WOFF und TTF gleichzeitig angeben?
- Da Browser unterschiedliche Formate unterstützen, ist eine Fallback-Kette gängige Web-Praxis. Moderne Browser laden zuerst das kleinere WOFF2, ältere Umgebungen weichen auf WOFF oder TTF aus.
- Kann ich den erzeugten Code direkt verwenden?
- Ja, er enthält font-display: swap und folgt dem Standardformat, sodass er ohne Anpassung in Ihre CSS-Datei eingefügt werden kann.