Search
Generic filters
Exact matches only
Filter by Custom Post Type

Schriften in WordPress einbinden

Lesezeit ca. 4 Minuten

Die verwendete Schriftart (englisch Font) entscheidet maßgeblich über den Gesamteindruck Deiner WebsiteMit dem Begriff Website wird die Gesamtheit aller unter einer Domain abrufbaren Einzelseiten bezeichnet, die normalerweise durch eine einheitliche Navigation verbunden sind.. Daher solltest Du bei der Auswahl eine sorgfältig durchdachte Entscheidung treffen. Früher gab es nur eine Handvoll Schriftarten, bei der sicher war, dass jeder Browser diese auch anzeigen kann.

Das Problem mit seltenen Schriftarten

Nicht jede Schriftart, die Du auf Deiner Website verwendest, befindet sich auch auf dem Rechner Deiner Besucher. Sie können Deine Artikel zwar trotzdem lesen, allerdings werden ihnen diese dann in einer Schriftart angezeigt, die auf ihrem Computern installiert ist. Das kann den Gesamteindruck Deiner Website stark beeinträchtigen. Zur Lösung dieses Problems stehen Dir zwei Wege offen: Zum einen kannst Du sogenannte Webfonts nutzen. Dies sind Schriften, die online abrufbar sind und nicht auf einem Computer hinterlegt sein müssen. Zum anderen kannst Du die gewählte Schriftart direkt als Datei auf Deinem Server einbinden. Beides bewirkt, dass die Texte auf Deiner SeiteNormalerweise werden Seiten in WordPress im Gegensatz zu Beiträgen eher für Inhalte genutzt, die selten geändert und für Besucher von überall aus schnell zugänglich sein sollen wie z.B. das Impressum. Besuchern automatisch in der richtigen Schriftart angezeigt wird — selbst dann wenn die Schriftart nicht auf dem Rechner des Besuchers installiert ist!

Themeoptionen: vielleicht gibt es schon was du brauchst?

Bevor Du Dich für einen der folgenden Lösungswege entscheidest, solltest Du zunächst überprüfen, ob Dein aktuelles Theme nicht schon das bietet was Du suchst. Mittlerweile haben viele Themes den Zugriff auf z.B. die beliebten Google Fonts bereits integriert. Hier lohnt sich also ein Blick in die Einstellungen Deines genutzten ThemesEin WordPress Theme ist eine Designvorlage, auf der das Aussehen der zugehörigen Website basiert.. Wenn Du dort findest was Du benötigst, solltest Du einfach diese Möglichkeit nutzen.

Webfonts einbinden

Der große Vorteil von Webfonts ist, dass sie online abrufbar sind und automatisch mit dem Inhalt der Website laden. Bei der Auswahl der passenden Schrift musst Du lediglich darauf achten, unter welcher Lizenz sie laufen. Kostenlose Fonts findest Du z. B. auf Google Fonts. In einem Preview-Text kannst Du testen, wie ein Schriftbild wirkt, ehe Du die Schrift tatsächlich in Deine Website integrierst.

Der einfache Weg: Einbindung durch das Plugin WP Google Fonts

Wenn Du Dich im Umgang mit PHP und CSS nicht sicher genug fühlst, kannst Du das Plugin WP Google Fonts verwenden. Nach der Installation wählst Du in dem PluginEin Plugin ist eine in WordPress integrierbare Erweiterung, die zusätzliche Funktionen bereit stellt. bis zu sechs Schriften aus den Google Fonts aus und weist diese den Elementen zu, die anschließend in der jeweiligen Schrift angezeigt werden sollen.

DIY: Webfonts selbst einbinden

Wenn Du Dir das Bearbeiten der Themedateien zutraust, kannst Du Webfonts auch selbst integrieren.

Hast Du Dich für eine Schriftart entschieden, generiert Google Fonts Dir einen Code, den Du in die headerDer Header ist der obere Teil einer Internetseite, der meist den Titel der Website, das Logo und die Hauptnavigation enthält..php Deines Themes nach dem head-Tag einbindest. Bzw. besser noch in eine in Deinem Child Theme Ordner erstellte Kopie der header.php, damit diese Veränderung auch nach einem Theme Update erhalten bleibt. So sieht beispielsweise der Code für die Schriftart Lato aus den Google Fonts aus:

Damit die ausgewählte Schriftart auch den entsprechenden Textelementen zugewiesen wird, musst Du dem jeweiligen Element diesen CSS-Code zuweisen. Der CSS-Befehl für die von Dir gewählte Schriftart wird Dir ebenfalls von Google Fonts angezeigt. Hier als Beispiel für die Schriftart Lato:

Um auf diesem Weg den Überschriften h1 und h2 die neue Schriftart Lato zuzuweisen, könntest du folgenden CSS-Code in die style.css Deines Child Themes einfügen:

Direkte Einbindung über @font-face

Auch mit @font-face kannst Du Schriften in Deine Website implementieren. Hierfür wird nur CSS benötigt, weshalb dieser Weg sehr einfach ist. Damit das Design anschließend kompatibel mit allen Browsern ist, solltest Du die Schrift in allen Formaten einbinden: TTF, OTF, EOT und WOFF. Wenn Du Deine Schriftart nur in einem dieser Formate besitzt, kannst Du diese über den Kit-Generator für Webfonts in alle Formate umwandeln. Per FTPFTP (File Transfer Protocol) ermöglicht die Übertragung von Dateien zwischen Rechner und Server. Weitere Informationen finden sich in unserem ausführlichen FTP-Grundlagen Artikel. lädst Du die Schriftdateien in einen neu angelegen Ordner innerhalb Deines Theme- bzw. besser Child Theme-Ordners hoch. In unserem Codebeispiel gehen wir davon aus, dass dieser Ordner „fonts“ genannt wurde.

Anschließend fügst Du in der style.css in Deinem Child Theme diesen Code ein (Beispiel für die Einbindung der Schriftart Lato):

Nach font-family kannst Du eine beliebige Bezeichnung vergeben, mit der Du später die eingebundene Schriftart verwendest. Allerdings ist der Name der Schriftart hier am sinnvollsten. Als Quelle gibst Du den Pfad zu der entsprechenden Schriftdatei an. Falls Du den Ordner anders benannt hast, muss die Verlinkung angepasst werden. Beispielsweise statt fonts/lato.eot -> Schriften/lato.eot. Um die neue Schriftart zu verwenden, kannst Du nun das font-family-Attribut genau wie bei den Webfonts beschrieben nutzen.

Fazit: Der Auswahl einer individuellen Schrift steht nichts im Wege

Mit den genannten Lösungsmöglichkeiten gibt es keinen Grund sich gegen eine individuelle Schriftart zu entscheiden. Befürchtungen, dass die Schriftart nicht angezeigt werden kann, gehören zum Glück der Vergangenheit an.

WordPress Probleme

Die 9 häufigsten WordPress Probleme 2018 und einfache Lösungen

9 typische WordPress Probleme: Von Darstellungs-, Server- oder Datenbank- bis hin zu Loginproblemen, findest du hier für alles eine Lösung.

WordPress DSGVO (GDPR): Datenschutz

WordPress & DSGVO: Datenschutz beachten

WordPress und die DSGVO: Alles was Du beachten solltest, um Deinen Datenschutz auf Zack zu bringen und Abmahnungen zu vermeiden.

WordPress Wartungsmodus (Maintenance Mode)

WordPress Wartungsmodus ein- und ausschalten

Was tun, wenn WordPress im Wartungsmodus stecken bleibt oder falls Du den Wartungsmodus einschalten möchtest? Wir zeigen wie es geht!

Möchtest Du mehr zu WordPress?

Hol' Dir jetzt unseren kostenlosen Newsletter