Hier möchte ich euch zeigen, wie ihr eine Google Webfont mit enqueue in ein WordPress Theme einbinden könnt.

Kurze Einleitung..
Es gibt sogenannte Serifen Schriften, wie Times New Roman und serifenlose Schriften, wie Arial. Diese beiden Namen kennt wohl jeder. Sie werden bis heute noch als sogenannte „Fallback“ Schriften zusätzlich angeführt. Viele Jahre waren diese Schriften für Browser die sogenannte Standardschriften. Alle anderen wurden einfach nicht dargestellt.

Schriften kaufen und direkt in ein WordPress Theme einbinden über @font-face ist teuer. Und es gibt die Google Webfonts. :-)

Es gibt allerdings sowohl vom Style her , wie auch von der Ladezeit her einiges zu beachten. Was sich am besten etabliert hat:

– maximal zwei Schriftstile zu kombinieren
– nur die Schriftschnitte zu laden, welche auch tatsächlich dann verwendet
– @import Methode meiden
werden.

Tipp:
Einfach zur Inspiration mehrere Webseiten ansehen und nachsehen,
welche Schriften das sind, die einem gefallen.

So kannst du nachsehen, welche Schriften eine Webseite verwendet:

Einfach z.B. in Windows STRG U klicken. Es öffnet sich ein neues Fenster mit dem Quelltext der Webseite. Ziemlich im oberen Bereich sieht man dann schon die Google Fonts eingebunden. Wer die Webdeveloper Toolbar im Firefox aktiviert hat, der kann auch auf  Extras > Erweiterung Webdeveloper >CSS > CSS ansehen gehen. Dort findet er dann über die eingebundenen Schriften noch genauere Informationen.

Google Webfonts bietet drei Möglichkeiten an, die Schriften einzubetten. Zwei davon habe ich euch hier erklärt.

Die, welche wir heute ansehen, wird von Google nicht angeboten, ist auch WordPress spezifisch. Allerdings die am ehesten zu empfehlende Methode. Dabei wird der von Google Webfonts erstellte Code einfach in die functions.php des eigenen WordPress Themes mit enqueue style eingebunden.

Zunächst möchte ich euch noch zeigen, wie man zwei Schriften gleichzeitig einbinden kann. Dazu wählen wir einmal zwei Schriftarten in den Google Webfont aus. In diesem Beispiel wähle ich Open Sans, als serifenlose Schrift und Lora, als serifen Schrift aus. Diese füge ich zu add collections hinzu.

Wähle also deine Collection aus und klicke dann rechts unten auf den Button > use. Hier kannst du noch einmal alle Schriftschnitte auswählen. Rechts siehst du den Page Speed Zeiger, der wenn du zu viele auswählst, bald auch im roten Breich sein kann. Also nur geziehlt das auswählen, was du benötigst.

Als nächstes wähle das Character Set aus. Setze das Häkchen bei Latin. Als nächstes > add this Code to your Website und zwar Standard. Beim enqueuen nur das auswählen, was ab https dort steht:

// Google Fonts kopieren 

'https://fonts.googleapis.com/css?family=Lora|Open+Sans'

ACHTUNG:
Wir binden hier die Google Fonts über enqueue style in die functions.php des eigenen WordPress Themes ein. Für dein eigenes Custom WordPress Theme reicht das aus.
Falls du ein Theme zur Veröffentlichung in wordpress.org hochladen möchtest, dann befolge folgende Anleitung : How to add Google fonts to  WordPress themes

Öffne nun die functions.php deines Themes und füge folgenden Code hinzu. Tausche den Link – das https… – mit deinem eigenen aus.

<?php
function mdq_add_google_fonts() {

wp_enqueue_style( 'mdq-google-fonts',
 'https://fonts.googleapis.com/css?family=Lora|Open+Sans', false ); 
}

add_action( 'wp_enqueue_scripts', 'mdq_add_google_fonts' );
?>

Weitere Quellen bei wpbeginner.  Ein weiterer guter Beitrag, m.E. obwohl schon älter, ist hier < using google webfonts with wordpress.. ­   In diesem Beitrag sind in den Kommentaren viele gute Antworten, warum eigentlich Google Webfonts etc.

Ebenfnalls ein guter Tipp ist im webdesign-journal.de, wo viele Schriftpaar -beispiele vorgestellt werden. Ebenfalls gibt es  eine neue Version der Google Fonts. Zur Zeit wirst du gefragt, ob du die neue Version verwenden möchtest. Sie sieht ehrlich super aus. Allerdings muss man sich ein wenig Zeit nehmen um sich alles anzusehen.

FAZIT:

Falls das Thema Webfonts für dich noch neu ist und du ein wenig experimentieren möchtest, wie du die Fonts einbinden kannst, dann sind diese Tipps hier hoffe ich, hilfreich.
Ich persönlich habe bis jetzt immer nur die Standardschriften verwendet. Sie funktionieren, man hat keine Arbeit und der Page Speed stimmt auch. Allerdings sind Schriften schon etwas ganz besonderes und man kann mit Schriften einem Webauftritt einen ganz neuen, speziellen Charakter verleihen.
Learnin by doing, sowie vom groben zum feinen.
In diesem Sinne, denke ich, sollte man sich um den Page Speed erst in zweiter Linie Gedanken machen und eben nur geziehlt auswählen, was man benötigt.