Google Fonts in eine Website einbinden

Websichere SchriftenMit Schriften ist das im Internet so eine Sache: Nicht alles, was auf Ihrem Rechner gut aussieht, kommt auch auf anderen PCs so an, wie man sich das vorstellt.

Wenn Sie für Ihre Website eine exotische Schriftart verwenden, so wird diese nur auf den Rechnern angezeigt, auf denen diese Schrift auch installiert ist. Für alle anderen Besucher Ihrer Website ist diese Schrift nicht sichtbar – Der Browser wird auf eine andere installierte Schriftart zurückgreifen, was im Zweifel das ganze Layout Ihrer Website „zerschießen“ kann.

Eine Übersicht der gängigsten Schriftarten findet sich auf Webmasterpro. Der Artikel ist zwar schon etwas älter, aber er zeigt doch deutlich, wie wenige Schriften eine weite Verbreitung haben.

Und was nun? Websites künftig nur noch mit Arial, Helvetica und Verdana gestalten? Mit einer Brise Times New Roman und Courier gewürzt?

Keine Sorge – Es gibt eine Alternative, die es erlaubt, auch weniger gängige Schriften so in eine Website einzubinden, dass sie in allen Browsern gleich angezeigt wird. Diese Alternative sind die Google Fonts.

Unter den Google Fonts findet man aktuell rund 630 Schriftarten. Diese lassen sich nach den verschiedensten Kriterien filtern. Bei dieser großen Auswahl an Schriften ist wirklich für jeden Anlass und jeden Geschmack etwas dabei. Und das beste: Die Schriften können nicht nur im Web verwendet werden sondern auch in fast jeder Anwendung auf Ihrem PC, die auf Schriftarten zurückgreift.

Was mir besonders gut gefällt: Man kann in der Übersicht einen eigenen Vorschautext eingeben und kann so direkt sehen, wie die ausgewählte Schriftart wirkt.

Vorsicht: Die Suche nach einer passenden Schriftart kann ein ziemlicher Zeiträuber werden, weil es so viel Spaß macht 🙂

Ich habe eine Schrift gefunden – Und wie kriege ich die jetzt in meine Website?

Wenn Sie eine Schrift gefunden haben, die Ihnen gut gefällt, klicken Sie bei der entsprechenden Schrift einfach auf den blauen Button „Add to Collection“.
 
Google Fonts - Hinzufügen
 
Im unteren Bereich des Bildschirms werden die ausgewählten Schriften dann in einer Übersicht dargestellt. Man muss sich dabei nicht auf eine Schriftart beschränken sondern kann beliebig viele weitere Schriftarten zur Sammlung hinzufügen.

Wenn Sie Ihre Auswahl beendet haben, klicken Sie einfach auf den kleinen Button „Use“
 
Google Fonts verwenden
 
Sie gelangen dann auf eine Seite, in der zunächst alle ausgewählten Schriftarten noch einmal in der Übersicht angezeigt werden, zusammen mit einem Hinweis, welche Auswirkungen die ausgewählten Schriften auf die Ladezeiten Ihrer Website haben. Falls gewünscht, könnten Sie hier auch noch weitere Schriftsätze zu der gewählten Schriftart auswählen.

Unter Punkt 3 wird es dann spannend. Hier finden Sie einen Code, den Sie in Ihre Website einbauen müssen, damit diese die Schriftart korrekt darstellen kann. Zur Auswahl stehen:

  • ein Standard-Code,
  • der Befehl @import
  • und Javascript.

Der Standard-Code wird per Copy&Paste in der Website in den Bereich zwischen und eingestellt. Bei einer WordPress-Website finden sich diese Tags in der Regel in der header.php.

Der Nachteil: Wenn das Theme aktualisiert wird, wird die header.php überschrieben und der Import geht verloren. Wenn Sie diese Variante wählen, sollten Sie in jedem Fall ein Child-Theme anlegen, in welches Sie die header.php mit einstellen.

Das selbe gilt für die Verwendung des Javascript-Codes, der ebenfalls zwischen und eingestellt wird.

Ich persönlich bevorzuge die Variante @import:

@import url(http://fonts.googleapis.com/css?family=xxxx);

Wobei xxxx natürlich jeweils durch die gewählte Schriftart ersetzt wird.

Dieser Code wird in das Stylesheet des Themes geladen. Im Idealfall können Sie diesen Code in den Bereich „Custom CSS“ einbinden, den viele Themes anbieten.

Wenn Ihr Theme keine Möglichkeit bietet, eigene CSS-Regeln einzustellen und Sie kein Child-Theme anlegen möchten, empfehle ich das Plugin „My Custom CSS„. Mit Hilfe dieses Plugins können Sie individuelle Anpassungen an Ihrem Theme vornehmen ohne Sorge, dass beim nächsten Theme-Update alle Änderungen verloren gehen.

Nun haben Sie die gewünschte Schriftart in Ihre Website integriert. Um sie zu verwenden fehlt noch ein letzter Schritt: Sie müssen die Schrift noch den entsprechenden Elementen (z.B. Inhalt, Überschriften, etc.) zuordnen.

Auch hierfür ist ein kleiner Eingriff in das Stylesheet erforderlich. Dafür verwenden Sie den Code, den Sie unter Punkt 4 finden, z.B.

font-family: ‚Schriftart‘, serif;

Wollen Sie z.B. die Überschriften alle mit der neuen Schriftart anzeigen lassen, tragen Sie im Stylesheet (bzw. im Bereich Custom CSS) folgendes ein:

h1, h2, h3, h4, h5, h6 {font-family: ‚Schriftart‘, serif;}

Es würde an dieser Stelle etwas zu weit führen zu erläutern, wie man jedes einzelne Element auf der Website mit der korrekten Schriftart definiert. CSS-Kenntnisse sind dafür schon recht hilfreich.

Wenn Sie sich etwas intensiver mit der Programmierung mit HTML und CSS befassen möchten, empfehle ich Ihnen mein eBook zum Thema „Grundlagen HTML + CSS“, welches im WordPress-Bistro zum Preis von EUR 4,19 zzgl. MwSt. (EUR 4,99 brutto) erworben werden kann.

Wenn Sie noch Fragen zum Thema haben beantworte ich Ihnen diese auch gern hier im Blog. Nutzen Sie dafür einfach die Kommentarfunktion.

Bildquelle:
© adimas – Fotolia.com

Print Friendly, PDF & Email

Kommentare

Google Fonts in eine Website einbinden — 3 Kommentare

  1. Ich weiß das ist ein älterer Beitrag aber auf Grund der neuen EU – DSGVO soll man Google Fonts auf den eigenen Server speichern und in das Theme einbauen. Für mich die Frage wie kann ich das richtig erledigen? Geht das auch mit einem Plugin oder muss man das manuel machen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren