Fontik

Schrift mit CSS auf einer Website verwenden

Um eine Schrift auf deiner eigenen Website anzuzeigen, lege ihre WOFF2-Dateien auf deinen Server und binde sie in CSS mit @font-face ein. Besucher müssen nichts installieren.

Zuletzt aktualisiert:

Schritte

  1. Verwende die WOFF2-Dateien: Sie sind klein und werden von allen aktuellen Browsern unterstützt. Das Web-Kit, das du auf der Schriftseite herunterladen kannst, enthält WOFF2-Dateien und fertiges CSS.
  2. Lege die Schriftdateien auf deinen eigenen Server, zum Beispiel in den Ordner /fonts/.
  3. Deklariere die Schrift in CSS mit @font-face: @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Verwende sie in deinen Stilen und nenne immer Ersatzschriften: body { font-family: "My Font", system-ui, sans-serif; }
  5. font-display: swap zeigt den Text sofort in einer Ersatzschrift an und tauscht sie gegen deine Schrift aus, sobald diese geladen ist.
  6. Bei einer variablen Schrift nimmst du eine einzige Datei und gibst in @font-face den Gewichtsbereich an, zum Beispiel font-weight: 100 900.

Tipps

  • Lade die Hauptdatei mit diesem Tag im head der Seite vor: <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Behalte nur die Gewichte, die du wirklich verwendest.
  • Liefere die Dateien vom selben Ursprung wie die Seite aus oder sende CORS-Header, wenn sie von einer anderen Domain kommen.
  • Prüfe, ob die Lizenz die Nutzung im Web erlaubt; kostenlose Schriften mit offenen Lizenzen tun das in der Regel.

Fragen

Welche Dateien brauche ich für eine Website?

Die WOFF2-Dateien. Sie sind klein und funktionieren in allen aktuellen Browsern; das Web-Kit auf der Schriftseite enthält sie zusammen mit fertigem CSS.

Müssen Besucher die Schrift installieren?

Nein: Der Browser lädt die Schrift von deinem Server, sobald die Seite sie anfordert.

Darf ich die Schrift in einem kommerziellen Projekt verwenden?

Das hängt von der Lizenz der Schrift ab. Lies sie auf der Schriftseite im Katalog.

Weitere Anleitungen