Roboto in den Überschriften, Open Sans im Fließtext. Die Typografie der Website wirkt wie die Hälfte aller WordPress-Installationen. Der Besucher erkannte das Muster, identifizierte die Schriftart, und die Seite verlor einen Teil ihrer Individualität, noch bevor der erste Absatz gelesen war.

Eine benutzerdefinierte Schriftart bindet man auf zwei Wegen in WordPress ein: über ein Plugin in zwei Minuten ohne eine einzige Codezeile oder manuell per @font-face mit voller Kontrolle über die Dateien. Beide Wege funktionieren zuverlässig; die Wahl hängt von Ihrer Erfahrung mit CSS ab.

Im Folgenden behandeln wir, wo Sie Schriften beziehen, wie Sie ein Plugin einrichten und wie Sie @font-face in einem Child-Theme ergänzen. Der Code stammt aus produktiven Installationen: einfügen, den Dateinamen ersetzen, und Ihre Typografie ist einsatzbereit.

💡 Kurzüberblick:

• Laden Sie eine Schriftart von DaFont oder FontSquirrel im Format WOFF2 oder TTF herunter: mindestens drei Schnitte (normal, fett, kursiv).
• Installieren Sie Use Any Font oder Fonts Plugin, laden Sie die Datei über das Admin-Panel hoch und weisen Sie die Schriftart Elementen zu. Kein Code nötig.
• Oder binden Sie sie manuell ein: Legen Sie im Child-Theme einen Ordner fonts an, laden Sie die Dateien per FTP hoch und ergänzen Sie in der style.css für jeden Schnitt eine @font-face-Regel.
• Prüfen Sie die Darstellung in mehreren Browsern und installieren Sie nicht mehr als zwei benutzerdefinierte Schriftarten: jede Datei erhöht das Seitenvolumen.

Wo Sie Schriften beziehen und in welchem Format

Jeder kennt Google Fonts, genau deshalb sind sie überall. Wenn Sie etwas weniger Abgenutztes brauchen, finden Sie hier drei bewährte Quellen.

DaFont bietet über 3.500 Schriftarten mit Kategorien von Comics bis Vintage. Die meisten sind für den privaten Gebrauch kostenlos. Für kommerzielle Projekte prüfen Sie die Lizenz jeder Datei einzeln; sie ist auf der Schriftseite aufgeführt.

FontSquirrel konzentriert sich auf freie Schriften mit kommerziellen Lizenzen. Die Sammlung ist klein, aber jede Schrift wurde juristisch geprüft. Der integrierte Generator konvertiert eine heruntergeladene Datei mit einem Klick in WOFF und WOFF2.

FontSpring verkauft lizenzpflichtige Schriften, aber fast jede Familie enthält ein oder zwei kostenlose Schnitte. Lesen Sie die Lizenz vor dem Download sorgfältig: unterschiedliche Schnitte können unterschiedliche Bedingungen haben.

Grundregel: Setzen Sie nicht mehr als zwei benutzerdefinierte Schriftarten auf einer Website ein. Eine für Überschriften, eine weitere für den Fließtext, das genügt. Jede Datei erzeugt eine HTTP-Anfrage und erhöht das Seitenvolumen um 30 bis 100 KB.

Laden Sie alle Schnitte auf einmal herunter: normal, fett, kursiv und fett-kursiv. Hat die Datei nur einen Schnitt, simuliert der Browser Fett und Kursiv durch künstliches Verbreitern, das Ergebnis wirkt grob.

Methode 1: Plugin in zwei Minuten

Ein Plugin, der einfachste Weg. Installiert, die Schriftdatei hochgeladen, den Einsatzort gewählt. Kein Code, keine FTP-Verbindungen.

Use Any Font

🔗 Use Any Font auf WordPress.org

🔗 Screenshots und Demo

Lädt Schriftarten in den Formaten TTF, OTF und WOFF hoch und konvertiert sie automatisch in WOFF2 mit Brotli-Komprimierung. Laut der Plugin-Seite auf WordPress.org erhöht sich die Ladegeschwindigkeit um etwa 30%. Die Schriftarten werden auf Ihrem Server gespeichert: DSGVO-Konformität ab Werk, keine Abhängigkeit von externen APIs nach der Konvertierung.

Nach der Installation erhalten Sie einen API-Schlüssel (der kostenlose Lite-Schlüssel ermöglicht eine Konvertierung), laden die Datei hoch und weisen die Schriftart über die visuelle Oberfläche zu. Sie können sie direkt aus dem Admin-Bereich auf Überschriften, Absätze oder bestimmte Blöcke anwenden.

Unterstützt die Integration mit Elementor, Divi, WPBakery, Gutenberg: Weisen Sie die Schriftart einmal im Plugin zu, sie erscheint in der Schriftartenliste des Builders.

Hinweis: Für mehrere Schriftarten benötigen Sie einen Premium-Schlüssel. Für eine typische Website reicht die kostenlose Version aus: eine Markenschrift für Überschriften, Google Fonts für den Fließtext.

Fonts Plugin

🔗 Fonts Plugin auf WordPress.org

🔗 Plugin-Screenshots

Früher Olympus Google Fonts: umbenannt, Funktionsumfang erweitert. Laut der Plugin-Seite hat es über 200.000 aktive Installationen und eine 5-Sterne-Bewertung von mehr als 1.200 Nutzern. Unterstützt Google Fonts, Adobe Fonts (Typekit) und das Hochladen eigener Dateien.

Die Einrichtung erfolgt über den Customizer: Schriftart auswählen, Live-Vorschau ansehen, speichern.

Die Pro-Version bietet lokales Hosting von Google Fonts für die DSGVO, selektives Laden nur der benötigten Schriftschnitte sowie Kontrolle über Größe, Farbe und Zeilenhöhe. Die kostenlose Version genügt für die meisten Websites.

Plugin oder manuell: Wann wählt man was?

Ein Plugin punktet bei der Geschwindigkeit: 2-Minuten-Installation, kein Code nötig. Sie sind jedoch abhängig von Plugin-Updates und dessen Kompatibilität mit der WordPress-Version.

Die manuelle Installation per @font-face ist aufwändiger einzurichten, aber Sie kontrollieren jedes Byte. Keine Drittanbieter-APIs, keine Updates, die Ihre Typografie zerstören.

Wenn Sie bereits mit einem Child-Theme arbeiten, fügt sich die manuelle Methode organisch in Ihr CSS ein. Die Schriften werden Teil des Themes und bleiben dort über Jahre erhalten.

Methode 2: Manuelle Einbindung via @font-face

Die @font-face-Direktive bindet Schriftdateien direkt von Ihrem Server ein. Unterstützte Formate sind TTF, OTF, WOFF, WOFF2 und SVG. Jede Schriftstärke benötigt einen eigenen Codeblock.

Nach der Einrichtung vergessen Sie das Thema Typografie jedoch für Jahre: WordPress- und Theme-Updates beeinflussen die Schriften nicht, sie liegen in Ihrem Child-Theme und werden bei jedem Aufruf als Teil des CSS geladen.

Erstellen Sie vorab ein Child-Theme: Alle Änderungen erfolgen darin, das übergeordnete Theme bleibt unberührt und aktualisiert sich, ohne dass Ihre Anpassungen verloren gehen.

Schritt 1: Ordner für Schriften anlegen

Erstellen Sie im Child-Theme-Ordner ein Verzeichnis fonts. Fügen Sie es per FTP oder über den Dateimanager des Hostings hinzu:

1
wp-content/themes/your-child-theme/fonts/

Wenn Ihr Child-Theme twentytwentyfour-child heißt, lautet der Pfad wp-content/themes/twentytwentyfour-child/fonts/.

Schritt 2: Schriftdateien auf den Server laden

Kopieren Sie die heruntergeladenen Dateien per FTP oder Dateimanager des Hostings in den fonts-Ordner. Für jede Stärke eine eigene Datei:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

In der Praxis genügen die Formate WOFF und WOFF2: Sie decken alle modernen Browser ab und sind kleiner als TTF. Laut MDN Web Docs komprimiert WOFF2 eine Schrift 30% effizienter als WOFF und wird seit 2016 von allen Browsern unterstützt.

Der Browser wählt aus den eingebundenen Formaten das passende aus: Unterstützt er WOFF2, lädt er dieses, andernfalls nimmt er WOFF.

Schritt 3: @font-face in style.css einfügen

Öffnen Sie die style.css des Child-Themes und fügen Sie den Code nach dem Theme-Header ein (dem Kommentar mit Theme-Name und Beschreibung). Beginnen Sie mit der normalen Stärke:

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont.woff2') format('woff2'),
4
         url('fonts/WebFont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}

font-family, der Schriftname, den Sie im CSS verwenden. Benennen Sie ihn so, dass Sie ihn nicht mit Systemschriften verwechseln: nicht Arial, sondern MyBrandSans oder BrandHeading. src, Pfad zu den Dateien relativ zur style.css. Die Reihenfolge ist relevant: WOFF2 zuerst (am leichtesten), WOFF danach (Fallback für ältere Browser).

Schritt 4: Kursiv hinzufügen

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Beachten Sie: font-family bleibt gleich, font-weight bleibt normal, und font-style wechselt auf italic. Der Browser setzt für das em-Tag und die Eigenschaft font-style: italic automatisch die richtige Datei ein.

Schritt 5: Fette Schriftstärke hinzufügen

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Hier ist font-style wieder normal, und font-weight steht nun auf bold. Jetzt rendern das strong-Tag und die Eigenschaft font-weight: bold mit Ihrer fetten Datei, nicht mit einer vom Browser vorgetäuschten Verdickung. Der Unterschied ist sichtbar: Eine echte fette Stärke ist vom Schriftgestalter ausgewogen, eine vorgetäuschte wirkt grob.

Schritt 6: Fett-Kursiv (optional)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Vier Stärken decken praktisch alle typografischen Aufgaben einer regulären Website ab. Erfordert das Design kein Fett-Kursiv, überspringen Sie diesen Schritt: Die Datei wird erst geladen, wenn das CSS explizit die Kombination bold + italic anfordert.

Schritt 7: Schrift auf Elemente anwenden

Fügen Sie nach @font-face Regeln hinzu, die die Schrift bestimmten Elementen zuweisen. Ergänzen Sie in der style.css des Child-Themes:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

Die erste Regel: Ihre Schrift für den Fließtext, mit einem Fallback auf System-Arial. Die zweite: Dieselbe Schrift für Überschriften, mit einem Fallback auf Georgia.

Sollte die Schriftdatei nicht laden (Server ist nicht erreichbar oder Pfad ist falsch), steht die Seite nicht ohne Text da: Der Browser zeigt Arial oder Georgia an. Ein Fallback ist zwingend erforderlich: Ohne ihn setzt der Browser die System-Standardschrift ein, meist Times New Roman, und die Typografie fällt auseinander.

Fertig. Eine individuelle Schrift ist ohne Plugins und externe Dienste eingebunden. Die Typografie liegt auf Ihrem Server und funktioniert weiter, selbst wenn eine Drittanbieter-API ihre Bedingungen ändert oder ausfällt.

Video: Schritt-für-Schritt-Einrichtung an einer Live-Site

Sehen Sie, wie der gesamte Ablauf auf einer echten WordPress-Site aussieht, von der Schriftauswahl bis zur Anwendung auf Überschriften:

Das Video zeigt beide Methoden: über ein Plugin und via @font-face. Es bietet sich an, zu pausieren und direkt mitzugehen. Das Video ist auf Englisch, der Ablauf ist aber auch ohne Ton visuell klar nachvollziehbar.

⁉️🤔 Häufig gestellte Fragen

Wie viele eigene Schriften kann ich auf einer Website einbinden?

Nicht mehr als zwei: eine für Überschriften, eine für den Fließtext. Jede Schrift umfasst mehrere Schnittdateien von jeweils 30 bis 100 KB. Zwei Schriften machen sich beim Seitenaufbau bereits deutlich bemerkbar. Eine dritte verschlechtert die Ladezeit spürbar, besonders bei langsamen mobilen Verbindungen.

Ist ein Child-Theme für @font-face zwingend erforderlich?

Formal nicht: Sie können @font-face direkt in die style.css des Eltern-Themes einfügen. Nach dem nächsten Theme-Update sind alle Änderungen jedoch verschwunden. Ein Child-Theme löst das ein für alle Mal. Falls Sie noch keines angelegt haben, führt Sie unser Leitfaden zum WordPress-Child-Theme von der Installation bis zum ersten Ergebnis.

Welches Dateiformat wählen: WOFF, WOFF2 oder TTF?

WOFF2, mit Priorität. Es komprimiert eine Schrift spürbar stärker als WOFF und wird von allen modernen Browsern unterstützt. WOFF als Rückfallebene für ältere Browserversionen. TTF und OTF binden Sie nur ein, wenn die Schrift nicht in Web-Formaten vorliegt: Sie sind unkomprimiert und doppelt so groß. Die Reihenfolge in src lautet immer: WOFF2, dann WOFF.

Warum wird die Schrift nach der Installation nicht angezeigt?

Drei häufige Ursachen. Erstens: Der Pfad zur Datei in url() ist falsch, prüfen Sie, ob der Pfad ausgehend von der style.css aufgebaut ist, nicht vom Stammverzeichnis der Website. Zweitens: Der Browser-Cache hält altes CSS vor, öffnen Sie die Website in einem Inkognito-Fenster oder leeren Sie den Cache mit Strg+F5. Drittens: Konflikt mit einem Theme, das font-family mit höherer Priorität überschreibt, prüfen Sie im Inspektor, welcher CSS-Selektor tatsächlich auf den Text angewendet wird.

Muss ich format() in src angeben?

Formal ermittelt der Browser das Format selbst aus den Datei-Headern. Ein explizites format('woff2') beschleunigt jedoch die Auswahl: Der Browser lädt eine Datei, die er definitiv nicht unterstützt, gar nicht erst herunter. Geben Sie es daher immer an. Dies ist eine Empfehlung der CSS Fonts Level 4 Spezifikation.

Wie prüfe ich, ob die Schrift von meinem Server geladen wird und nicht extern?

Öffnen Sie die DevTools (F12), den Tab „Netzwerk", den Filter „Schriften" und laden Sie die Seite neu. In der Liste dürfen nur Dateien von Ihrer Domain erscheinen. Sehen Sie fonts.googleapis.com oder fonts.gstatic.com, werden Google Fonts extern geladen. Verlagern Sie diese für die DSGVO-Konformität auf lokales Hosting, entweder über Fonts Plugin Pro oder durch manuellen Download und Einbindung via @font-face.

Welche Methode zur Schrifteinbindung wählen?

Beide Methoden funktionieren zuverlässig. Die Wahl hängt davon ab, was Ihnen wichtiger ist: Einrichtungsgeschwindigkeit oder Kontrolle über jedes Byte.

Installieren Sie zum ersten Mal eine Schrift und möchten keinen Code anfassen, nehmen Sie Use Any Font. Datei hochgeladen, Überschriften zugewiesen, fertig. Die kostenlose Version genügt für eine Hausschrift auf den Überschriften.

Benötigen Sie Zugriff auf den Google-Fonts-Katalog mit Live-Vorschau direkt im Customizer, nehmen Sie Fonts Plugin. Die kostenlose Version reicht für die meisten Aufgaben, Pro benötigen Sie nur für das lokale Hosting von Google Fonts gemäß DSGVO.

Arbeiten Sie bereits mit einem Child-Theme und sind es gewohnt, CSS manuell zu bearbeiten, wählen Sie @font-face. Keine externen Abhängigkeiten, volle Kontrolle, und nach der Einrichtung denken Sie jahrelang nicht mehr über Typografie nach. Theme-Updates beeinflussen die Schriften nicht, sie liegen als Teil des CSS in Ihrem Child-Theme.

Beginnen Sie mit einem Plugin: Das dauert zwei Minuten und birgt kein Risiko. Welche Schrift ist aktuell auf Ihrer Website im Einsatz, die Theme-Vorgabe oder haben Sie bereits eine eigene eingebunden?