Eigene Schriftarten auf einer Website einbinden

1. Schriftdateien vorbereiten

Prüfe zuerst, ob deine Lizenz die Nutzung im Web erlaubt. Ziehe dann deine TTF- oder OTF-Dateien in den Webfont Generator und lade das ZIP herunter. Meist brauchst du nur die WOFF2-Dateien.

2. Dateien hochladen

Kopiere den Ordner fonts auf deine Website, zum Beispiel nach /fonts/. Schriften müssen von deiner eigenen Domain geladen werden oder von einem Server, der den passenden Access-Control-Allow-Origin-Header sendet.

3. @font-face-Regeln hinzufügen

Jede Schnittstärke und jeder Stil bekommt eine eigene Regel:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Verwende für alle Schnittstärken denselben Familiennamen. Der Browser wählt dann für normalen und fetten Text automatisch die richtige Datei aus.

4. Schrift verwenden

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

Gib immer Ersatzschriften an, denn diese werden angezeigt, während deine Schrift lädt, oder falls sie nicht geladen werden kann.

Schriften auf beliebten Plattformen einbinden

• Webflow: Gehe zu Site-Einstellungen → Fonts → Custom Fonts und lade deine WOFF2-Dateien hoch.
• WordPress: Block-Themes können Schriften in der Schriftartenbibliothek des Site-Editors verwalten. Bei anderen Themes legst du die Dateien in einem Child-Theme ab und fügst das CSS in dessen Stylesheet ein.
• Tailwind CSS: Füge die Regeln deinem CSS hinzu und setze die Schrift danach als Theme-Wert. Im Tab Tailwind des Webfont Generators findest du den Code.

Prüfen, ob es funktioniert

Öffne deine Website und dann die Entwicklertools deines Browsers. Filtere im Netzwerk-Tab nach Font und lade die Seite neu. Jede Datei sollte Status 200 zeigen. Ein 404 bedeutet meist, dass der Pfad in deinem CSS falsch ist. Eine blockierte Anfrage deutet meist auf den Cross-Origin-Header hin. Führe danach den Page Speed Test aus, um zu sehen, wie sich die Schriften auf die Geschwindigkeit auswirken.