@font-face-Generator

@font-face-Generator: wofür es gut ist

Um eine eigene Schrift auf der Website zu nutzen, ohne von Google Fonts abzuhängen, musst du die Dateien hosten und jede mit @font-face deklarieren. Eine falsche Stärke oder ein vergessenes font-display lässt den Text während des Ladens unsichtbar oder mit falschem Fett erscheinen.

Wähle die Dateien, und das Tool findet Stärke und Stil anhand des Namens (Regular, Bold, SemiBold, Italic, 700, variabel), gruppiert die Formate derselben Variante, erzeugt die Regeln mit font-display: swap und das Preload-Tag mit crossorigin für die Schrift des ersten Bildschirms und zeigt eine Vorschau mit der echten Schrift.

So geht’s

1. Wähle die Dateien der Schrift.
2. Prüfe den Namen der Familie, die Stärken und den Ordner.
3. Kopiere das CSS und das Preload-Tag.

Wann nutzen

• Die Schrift der Marke auf der Website nutzen.
• Die Schrift selbst hosten statt Google Fonts.
• Eine Schrift mit falschem Fett reparieren.

Häufige Fragen

Welches Schriftformat nutze ich?

WOFF2. Es ist komprimiert und von allen aktuellen Browsern akzeptiert, sodass es auf den meisten Websites genügt. TTF und OTF funktionieren, sind aber deutlich schwerer; wandle vor der Veröffentlichung in WOFF2 um.

Wozu dient font-display: swap?

Es zeigt den Text sofort mit einer Systemschrift und tauscht gegen deine, wenn sie fertig geladen ist. Ohne das kann der Browser den Text einige Sekunden verstecken, was PageSpeed als Problem anzeigt.

Soll ich bei allen Schriften preload nutzen?

Nein, nur bei denen, die gleich auf dem ersten Bildschirm genutzt werden, normalerweise eine oder zwei (Fließtext und Titel). Zu viel Preload konkurriert mit dem Hauptbild um die Verbindung und kann das Laden verschlechtern. Das Preload einer Schrift braucht das Attribut crossorigin, auch auf der eigenen Domain.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools