Search
Generic filters
Exact matches only
Filter by Custom Post Type

Schriften in WordPress einbinden

Lesezeit ca. 7 Minuten

Die verwendete Schriftart (englisch Font) entscheidet maßgeblich über den Gesamteindruck Deiner Website. 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 Seite 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 Themes. 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.

Schriften & DSGVO: Datenschutz berücksichten

Auch wenn es immer etwas nervig ist, sollte man sich seit dem Inkrafttreten der DSGVO beim Einbinden externer Dienste immer ein paar Gedanken zum Datenschutz machen. D.h. wenn Du Google Fonts oder einen anderen Dienst nutzen willst und die Schriften über die im Folgenden beschriebene Methode einbindest, sollte unbedingt ein entsprechender Hinweis in Deiner Datenschutzerklärung stehen. Weitere Infos zu dem Thema findest du in unserem DSGVO & WordPress Artikel.

Wenn Du das Problem umgehen willst, dann kannst Du die Schriften auch auf Deinen Server laden und über die weiter unten beschriebene @font-face Methode einbinden. Dann erübrigt sich ein Eintrag in Deine Datenschutzerklärung.

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 Plugin 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 header.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 und die Schriftdateien 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. Wie Du an die Google Fonts Dateien kommst, haben wir weiter unten beschrieben.

Per FTP 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.

Google Fonts herunterladen

Wenn Du Google Fonts gerade aufgrund der DSGVO lieber direkt über Deinen Server einbinden willst, kannst Du die Schriften auch herunterladen. Allerdings ist diese Option etwas versteckt. Wenn Du Schriften ausgewählt hast und dann auf den unten rechts eingeblendeten Balken mit dem Titel „Family Selected“ klickst, erscheint eine Übersicht in der Du oben rechts auf das Download-Symbol klickst:

Google Fonts Download

Responsive und Schriften

Bei eingebundenen Schriften ist keine pixelige Anzeige zu befürchten, gleichgültig wie groß oder klein die Schrift angezeigt wird. Allerdings sollte jeder nach dem Einbinden einer Schrift die Anzeige auf einem Tablet und Smartphone prüfen. Es kann sein, dass die neue Schrift bei Ansicht auf diesen Geräten zu groß oder klein erscheint und so andere Schriftgrößen für diese Anzeigearten festlegt werden sollten.

In der Regel finden sich entsprechende Möglichkeiten in den Einstellungen des verwendeten Themes. Ansonsten muss direkt im CSS bei den entsprechenden Break-Points die Schriftgröße festgelegt werden. Das werden wir in einem späteren Artikel genauer erläutern.

Individuelle Schriften für WordPress kaufen

Auch wenn die Auswahl an Google Fonts recht umfangreich ist, möchte man sich vielleicht doch von anderen abheben oder einfach einfach eine passendere individuelle Schrift für die eigene Darstellung verwenden. Diesem Vorhaben steht nichts im Wege, denn es gibt mehrere Möglichkeiten, um aus einer großen Auswahl an Schriften die für die eigene Zwecke optimale auszuwählen.

Kostenloser E-Mail-Kurs: Wir zeigen Dir einsteigerfreundlich die Grundlagen der Suchmaschinenoptimierung - direkt und einfach: Anmelden!
Wichtig: Bei der Auswahl sollte man stets darauf achten, dass die Schrift auch die deutschen Umlaute „ÄÖÜ“ und andere besondere Zeichen wie „ß“ beinhaltet. Das ist leider nicht selbstverständlich. Ansonsten ist die Freude an der neuen Schrift oft nur von kurzer Dauer, wenn statt „Schöne Ferienziele“ nur „Sch ne Ferienziele“ angezeigt wird.

Eine gekaufte Schrift wird dann in den meisten Fällen über die oben erläuterte @font-face Methode eingebunden. In manchen Fällen möchte man eine solche Schrift auch einfach z.B. in seinen Beitragsbildern (Featured Image) verwenden. Dann genügt es die Schrift auf dem eigenen Rechner zu installieren, um diese im Grafikprogramm seiner Wahl verwenden zu können.

Creative Market Fonts

Ein sehr großen Fundus an Schriften zu einem moderatem Preis bietet Creative Market an:

Fonts kaufen: Creative Market

Auf den Creative Market Detailseiten der Schriften lassen sich in der Regel auch Beispieltexte eingeben und es wird eine Vorschau erzeugt. So kann man einen guten Eindruck von der Umsetzung der eigenen Texte mit dieser speziellen Schrift erhalten. Außerdem lässt sich so gut überprüfen, ob die deutschen Umlaute und Sonderzeichen vorhanden sind.

Envatos GraphicRiver Fonts

Auf der Graphic River Website des Anbieters Envato, finden sich ebenfalls viele Schriften und auch Bundles (Paketangebote) zu kleinem Preis.

Fonts kaufen: GraphicRiver von Envato

Auch hier kann meist auf der Detailseite der jeweiligen Schrift ein Beispieltext eingegeben werden, der dann in der gewünschten Schriftform als Vorschau dargestellt wird.

MyFonts

MyFonts bietet wohl die derzeit größte Auswahl an Schriften weltweit an. Allerdings liegen hier die Preise auch durchaus im höheren Segment, so dass man bei einem schmalen Budget oft nicht so weit kommt.

Fonts kaufen: MyFonts

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.

Convert Pro Popup Plugin Test

Convert Pro Popup Plugin Test & Anleitung 2019

Convert Pro ist ein sehr gutes Popup Plugin, das wir getestet haben und Du findest eine Anleitung, wie Du Dein erstes eigenes Popup erstellen kannst.

Elementor Popup Builder Test & Anleitung 2019

Elementor Popup Builder Test & Anleitung

Mit dem Elementor Popup Builder lassen sich tolle Popups und Optins erstellen. Wir haben ihn getestet und eine Anleitung erstellt.

Link in neuem Fenster öffnen: target_blank & noopener

Link auf neuer Seite öffnen: target_blank und noopener

In WordPress lassen sich Links ganz einfach auf einer neuen Seite öffnen. Allerdings kann es Probleme geben, die sich mit Hilfe von noopener lösen lassen.

Möchtest Du mehr zu WordPress?

Hol' Dir jetzt unseren kostenlosen Newsletter

15585

Einfach mehr Google-Besucher

Jetzt zum kostenlosen Kurs anmelden

15856
15585

Bitte prüfe Dein E-Mail-Postfach

Du musst Deine Anmeldung noch bestätigen!

Vielen Dank für Deine Anmeldung

15856
15585

Einfach mehr Google-Besucher

Jetzt zum kostenlosen Kurs anmelden

15856
15585

Bitte prüfe Dein E-Mail-Postfach

Du musst Deine Anmeldung noch bestätigen!

Vielen Dank für Deine Anmeldung

15856

Abonniere unseren Newsletter!

JOIN THE ELITE CLUB

3137

Du willst regelmäßig Informiert werden, wenn wir neue Artikel, Tipps und Tricks rund um WordPress veröffentlichen? Dann trage Dich jetzt ein! Zusätzlich kannst Du unsere Convert Pro Vorlage herunterladen.

Vielen Dank für Deine Anmeldung!

 

Du musst jetzt nur noch den Link in der von uns zugesandten Bestätigunsemail anklicken. Falls Du keine erhalten hast, schau bitte auch in Deinem Spamordner nach.

 

Am besten trägst Du unsere E-Mailadresse newlsetter@wphelp.de in die Whitelist Deines E-Mailprogramms oder Anbieters ein.

Nur noch ein Schritt!