Suche Menü

Google WebFonts einbinden – so geht`s

Google WebFonts bietet eine riesige Auswahl an kostenlosen Schriften, mittlerweile über 500.

Das ist eine tolle Sache für alle Webdesigner, da man nicht mehr auf die Web-Standartschriften angewiesen ist, natürlich gibt es auch eine Reihe anderer Möglichkeiten ausgefallene Schriften in Webseiten oder Blogs einzufügen, als Beispiel Cufon. Mir persönlich gefällt aber die Einfachheit wie man Google Web Fonts in Webseiten einbinden kann.

In diesem Artikel zeige ich Ihnen wie man Google WebFonts in ein WordPress Theme einfügt, wobei die Vorgehensweise bei anderen CMS ähnlich sein wird. Die Web Fonts können als Absatz oder Überschriften Formatierung genutzt werden.

Schritt 1
Auf Google Web Fonts suchen Sie sich eine Schrift ihrer Wahl aus, in der linken Seitenspalte können Sie noch ein paar Auswahkriterien treffen, welche das Suchen erleichtern. Die ausgewählte Schrift Speichern Sie in Ihrer Collection (add to collection).

Google Web Fonts

Schritt 2
Öffnen Sie Ihre Collection und klicken Sie rechts auf use, im sich neu öffnenden Fenster haben Sie noch die Möglichkeit Fettschrift oder normal zu wählen. Scrollen Sie ein Stück nach unten bis der einzufügende Link erscheint. Lassen Sie die Einstellungen auf Standard, ist die einfachste Möglichkeit die Schrift in Ihre Webseite einzufügen.

Google Web Fonts in WordPress einbinden

Schritt 3
Kopieren Sie den Link und fügen Sie ihn in der header.php Ihre Themes in den <head> Bereich ein.
In der stylesheet Datei ergänzen Sie das Style z.b.  die Überschriften dementsprechend ab
h1, h2, h3, h4, h5, h6 {  font-family: ‚ Allura‘, sans-serif; }

kostenlose Schriften mit google web fonts

Natürlich kann man auch mehrere Schriften in einem Link kombinieren, indem man die Schriften mit einem | Zeichen trennt. Das sieht dann so aus:

<link href='http://fonts.googleapis.com/css?family=Muli|Allura' rel='stylesheet' type='text/css'>

Also alles ganz Easy, viel Spaß beim Experimentieren.