Google Webfonts in WordPress einbinden – so funktioniert’s

google-webfonts-thumb Google Webfonts sind eine tolle Möglichkeit das eigene Webdesign mit schöner und etwas individuellerer Typografie umzusetzen, ohne gleich auf eine kostenpflichtige Lösung zurückgreifen zu müssen. Um Google Webfonts in einem WordPress-Theme einzubinden sollte man, statt der auf der Google Webfonts-Seite empfohlenen Methode der direkten Einbindung innerhalb des head-tags oder der Einbindung über @import ins Stylesheet, auf jeden Fall die Einbindung über eine Funktion in der functions.php Datei nutzen.

Und so funktioniert’s

Im neuen Twenty Thirteen WordPress Standard-Theme wird die Lösung der Einbindung von Google Webfonts in der functions.php sehr schön umgesetzt. Um die Ladezeit der Schrift so gering wie möglich zu halten kann man sogar abfragen, ob die genutzte Schrift Sonderzeichen enthält oder nicht. So werden z.B. Sonderzeichen (wie ß oder ö, ä, ü) auch wirklich nur geladen, wenn sie auch benötigt werden.

Welche Schriftschnitte werden benötigt?

Außerdem sollte man sich vor der Integration der Schriftarten noch einmal genau vergewissern, welche Schriftschnitte (also bold, italic etc.) man tatsächlich im Design nutzt. Nur diese Schriftschnitte sollten in den Code integriert werden. Bei Elmastudio gestalten wir unsere Theme-Designs z.B. immer in Adobe Illustrator und dort kannst du über Schrift / Schriftart suchen… eine Übersicht aller im Dokument genutzter Schriften ansehen. Die Liste kannst du dir auch als Text-Dokument abspeichern.

Alle Schriften des Dokuments anzeigen.
Alle Schriften des Dokuments anzeigen.

Der Code für die functions.php Datei

In meinem Beispiel möchte ich die Google Webfonts “Raleway” und “PT Sans” verwenden und zwar in den Schnitten 400, 700 (normal und bold) und 400,800,900 (normal und ultrabold).

Die benötigten Google Webfonts auswählen.
Die benötigten Google Webfonts auswählen.

Auf der Google Webfonts-Seite wird mir dazu dieser Code zur direkten Integration in den head-tag bereitgestellt:

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700|Raleway:400,900&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

Der fertige Code zur Integration über die WordPress functions.php Datei eines Themes lautet stattdessen nach dem Vorbild aus dem Twenty Thirteen-Theme:

function yourtheme_fonts_url() {
	$fonts_url = '';

	/* Translators: If there are characters in your language that are not
	 * supported by PT Sans or Raleway translate this to 'off'. Do not translate
	 * into your own language.
	 */
	$pt_sans = _x( 'on', 'PT Sans font: on or off', 'yourtheme' );

	$raleway = _x( 'on', 'Raleway font: on or off', 'yourtheme' );

	if ( 'off' !== $pt_sans || 'off' !== $raleway ) {
		$font_families = array();

		if ( 'off' !== $pt_sans )
			$font_families[] = 'PT Sans:400,700';

		if ( 'off' !== $raleway )
			$font_families[] = 'Raleway:400,900';

		$query_args = array(
			'family' => urlencode( implode( '|', $font_families ) ),
			'subset' => urlencode( 'latin,latin-ext' ),
		);
		$fonts_url = add_query_arg( $query_args, "//fonts.googleapis.com/css" );
	}

	return $fonts_url;
}

Durch die Abfrage nach eventuellen Zeichen, die nicht in der jeweiligen Schrift zur Verfügung stehen, kann man Fehler in der Schriftansicht verhindern und das Theme so auch international kompatibel machen.

Wenn man jetzt den von der Funktion generierten Link im Quellcode des Themes aufruft, sollten alle integrierten Schriften mit @font-face eingebunden sein. So kann man leicht prüfen, ob sich nicht aus Versehen ein Fehler im Code eingeschlichen hat.

Die Google Webfonts im Stylesheet aufrufen

Wenn man den Code in der functions.php integriert hat, muss man natürlich immer noch die Google Webfonts im Stylesheet angeben. Dazu kannst du wieder die Vorgaben auf der Google Webfonts-Seite nutzen und die Schriften ganz normal mit der CSS-Eigenschaft “font” oder “font-family” angeben. Bei der PT Sans und der Raleway wäre dies:

font-family: 'PT Sans', sans-serif;
font-family: 'Raleway', sans-serif;

Die Werte für font-weight und font-style muss man dann natürlich auch noch angeben, wenn man diese Schnitte nutzen möchte. Ich würde außerdem noch eine alternative Standard-Schrift wie Helvetica, Arial oder Georia angeben, falls die Google Webfonts einmal nicht geladen werden können. Also z.B.:

font-family: 'PT Sans', Helvetica, Arial, sans-serif;

Es ist also gar nicht so schwierig, Google Webfonts über die functions.php Datei in ein WordPress-Theme zu integrieren. Der Code des Twenty Thirteen Theme ist dabei eine sehr hilfreiche Vorlage, um Google Webfonts auch in das eigene WordPress-Theme integrieren zu können und so auch fremde Schriftarten und Sonderzeichen richtig unterstützen zu können.

Wie sind deine Erfahrungen bei der Integration von Google Webfonts in ein WordPress-Theme? Hast du noch weitere Tipps oder Empfehlungen, auf was man unbedingt achten sollte? Über dein Feedback und deine Tipps freue ich mich sehr!

17 Kommentare

  1. Ich finde, man sollte bei dem externen Einbinden von Services – auch hier bei Webfonts – egal ob von Google oder einer sonstiger, kommerziellen Firma – das Thema Datenschutz ebenfalls ansprechen und berücksichtigen (auch im Hinblick dann auf die oft notwendigen Datenschutz-Hinweise im eigenen Blog, da werden Webfonts oft nicht berücksichtigt/bedacht).

    • @Emanuel: Wie meinst du das denn genau? Es gibt meines Wissens doch nur den Google Analytics Hinweis fürs Impressum, wenn man diesen nutzt. Bei der Nutzung der Free Fonts über Google Webfonts werden ja lediglich die Schriftsätze über den Google Webfonts Dienst aufgerufen und keine Nutzerdaten gespeichert, oder? Ich würde mich über weitere Details zum Thema freuen, Grüße Ellen

      • Nun, man kann auch Nutzerdaten problemlos mit PHP erfassen und speichern. Das wird Google bestimmt auch machen.

  2. Was genau ist da der Vorteil im Vergleich zu der von Google empfohlenen Methode? Und apropos Datenschutz: Gibt es eine Möglichkeit, Google-Fonts direkt in die Seite einzubinden (ohne den Umweg über Googles Server)?

    • @Moritz: Der Hauptgrund ist, dass man bei der Integration der Google Fonts über die functions.php Datei die Schriften dynamisch einbindet. Das ist wichtig, um später auch Child Themes mit den Schriften nutzen zu können.

      Eine alternative Methode ist noch den @font-face Generator bei FontSquirrel zu nutzen (http://www.fontsquirrel.com/tools/webfont-generator ). Dann muss man die fonts selbst in einem fonts Ordner im Theme speichern. Aus meiner Erfahrung führt diese Methode aber manchmal zu unsauber gerenderten Schriften und ist auch etwas langsamer, als beim Laden über Google Webfonts. Grüße, Ellen

      • Hallo Ellen,

        was genau führt dabei Deiner Meinung nach zu den schlecht gerenderten Schriften? Der von fontsquirrel bereitgestellte Code oder dass die Fonts im Theme quasi selbst gehostet werden? Lassen sich Schriften selbst im Theme bereitstellen ohne diese Problematik? Grüße, Christian

  3. Ich nutze persönlich lieber die @import funktion, da diese meiner Meinung nach etwas klarer strukturiert ist. Außerdem nutzt das Framework, welches ich bevorzugt nutze, diese Methode als Standard.

    @Ellen Mich würde mal interessieren, welche Schriftarten du bevorzugst im blick auf F

  4. Ich nutze persönlich lieber die @import funktion, da diese meiner Meinung nach etwas klarer strukturiert ist. Außerdem nutzt das Framework, welches ich bevorzugt nutze, diese Methode als Standard.

    @Ellen Mich würde mal interessieren, welche Schriftarten du im Bezug auf Flat Design bevorzugt verwendest.

  5. Die Lösung von Twenty Thirteen finde ich ebenfalls super. Ich persönlich nutze die Einbindung via das link-Tag, da keine Child-Themes im Einsatz.

    @import würde ich nie bevorzugen, da es zu Problemen (stockendes Laden) in älteren IEs führt. Selbst Google (PageSpeed) rät davon ab.

  6. ich hab eine Frage die jetzt nicht gerade zu diesem Thema passt.

    $pt_sans = _x( ‘on’, ‘PT Sans font: on or off’, ‘yourtheme’ );

    was bedeutet das “yourtheme” ? ich lese das auch immer in der function.php von twentytwelve kann aber nirgends eine Erklärung finden. auch macht es anscheinend nichts aus wenn man es weg lässt.
    ich binde meine Schrift auch über @import ein, werde. ich aber dann wohl mal ändern wenn das besser ist :-)

  7. Hallo!
    Ich binde schon seit längerer Zeit die Schriften über die functions.php ein. Vor kurzem musste ich feststellen, dass Android-Geräte die Webfonts nicht oder nur teilweise laden, wenn die Verbindung schlecht ist. Bei den iOS-Geräten habe ich keine Probleme. Ist die Lösung vom Twenty Thirteen-Theme so viel performanter? Welche Erfahrung habt Ihr mit den Android-Geräten?

  8. Danke Ellen…ich habe es einfach ausprobiert und es funktioniert ^^
    Einfacher geht es nicht:-)

    LG, Trinity :-*

  9. Hallo!
    Verstehe ich das richtig, das man die functions.php des Original-Themes bearbeiten muss? Habe ein Child-Theme zu twenty thirteen erstellt, aber wenn ich die functions.php in den child-Ordner kopiere, funktioniert überhaupt nichts mehr? Die Original-Datei zu bearbeiten ist ja ungünstig, wenn das Theme mal ein Update erfährt..
    LG,
    Ron

    • Genau diese Frage stelle ich mir auch gerade. Schade, dass es noch keine Antwort darauf gibt.

    • Ich würde das Thema auch gern noch einmal kurz auffrischen. Wie ist nun der Stand? Muss wirklich die Funktion des Parent Theme bearbeitet werden oder kann man dies auch in der Funktion des Child Themes machen?

      Gruß Jan

  10. Ich habe eine Frage zur Umgehung der globalen Typografie in Popups. Ich verwende ein Popup Builder und er hat eigentlich schon sehr nette Fonts. Allerdings überschreibt meine globale WP Typografie Einstellung das H1 einfach mit der H1 meines Blogs und das sieht in dem Popup grausig aus. Wo kann ich das ändern, so dass die Schriftart des Popups nicht durch die globalen Typografieeinstellungen beeinflusst werden?

    Danke

  11. Roland Hirsch 9. Mai 2016

    Ich finde es auch immer besser, die Original-Dateien der Themes in Ruhe zu lassen und meinen eigenen Code in externe Dateien zu legen.
    Im aktuellen Fall könnt ihr den Code-Schnipsel von oben einfach in eine leere Textdatei kopieren. Dann den Code mit dem fehlenden PHP-Tag umschließen . diese Datei speichert ihr nun z.Bsp. als myfunction.php ab und legt sie im gleichen Ordner ab, in dem auch eure originale functions.php liegt. Nun braucht ihr in eurer originalen functions.php nur noch folgende Zeile unter den ersten PHP-Tag (<?php … )zu schreiben: include = myfunctions.php
    Somit könnt ihr alle Erweiterungen eurer functions.php zukünftig in eurer eigene myfunctions.php schreiben.
    Sollte es doch mal ein Update des Themes geben braucht ihr danach nur wieder eine einzelne Zeile – nämlich "include = myfunctions.php" in die aktualisierte functions.php eintragen.

    Gruß Roland

Hinterlasse eine Antwort

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