CSS @font-face Code-Generator
Erstellen Sie CSS @font-face Anweisungen für eigene Webfonts mit WOFF2- und TTF-Fallbacks
Generiert valide CSS-Regeln zum Einbinden lokaler Schriftdateien.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Geben Sie den Namen der Schriftfamilie ein.
- Fügen Sie die Dateipfade (woff2, woff, ttf) ein.
- Wählen Sie Gewichtung und Stil und kopieren Sie den CSS-Code.
FAQ
- Was bewirkt font-display?
- Es steuert das Rendering der Schriftart während des Ladevorgangs. 'swap' wird empfohlen.
- Wie registriere ich mehrere Schriftdateien mit unterschiedlicher Stärke, etwa Regular und Bold, auf einmal?
- Das Tool erzeugt jeweils nur einen @font-face-Block, daher erstellen Sie ihn einmal pro Stärke — mit jeweils anderem Dateipfad und font-weight-Wert — und fügen die Ergebnisse anschließend aneinander. Mit demselben font-family-Namen, aber font-weight: 400 für Regular und 700 für Bold, wählt der Browser automatisch die passende Datei für die jeweilige Stärke.
- Wie registriere ich mehrere Schriftdateien mit unterschiedlicher Stärke, etwa Regular und Bold, auf einmal?
- Das Tool erzeugt jeweils nur einen @font-face-Block, daher erstellen Sie ihn einmal pro Stärke — mit jeweils anderem Dateipfad und font-weight-Wert — und fügen die Ergebnisse anschließend aneinander. Mit demselben font-family-Namen, aber font-weight: 400 für Regular und 700 für Bold, wählt der Browser automatisch die passende Datei für die jeweilige Stärke.