Externe Schriften (Google Fonts)

Externe Fonts automatisch einbinden mit Google Fonts Api

Nicht immer findet man die Schriftart, die man unbedingt nutzen möchte in der Auswahl der lokalen Schriften. Dann gibt es neben der Einbindung von eigenen Schriften auch die Möglichkeit diese bequem über die Google API extern zu laden. Das ist einfach und geht schnell.

Schriftart bei Google Fonts aussuchen

Besuche nun die Seite von Google Fonts um Dir eine Schriftart auszusuchen, in unserem Beispiel entscheiden wir uns für Rubik:

Google FontsGoogle Fonts

In der Detailansicht der Schriftart klicke auf einen beliebigen style "+ Select this style". Es erscheint im rechten Bereich die Informationen zur font-family (2).

Du benötigst lediglich den Namen der Schrift - keinen weiteren Code:

'Rubik', sans-serif

Die verfügbaren Schriftschnitte (3) findest Du unter Styles.

Schriftart laden

Schalte zum Laden der Schriften in diesem Bereich den Schalter "Verwende externe Schriften" (1) ein, um die weiter unten konfigurierten Schriften zu laden.

In das Schriftart Feld (2) der Konfiguration kopierst Du nun den Namen und die generische Schriftfamilie: 'Rubik', sans-serif

Der Schriftname sollte von Anführungszeichen eingeschlossen werden.

Unter Styles (3) wählst Du die Schriftschnitte aus, die Du in der Storefront nutzen möchtest. Achte darauf, dass mindestens ein Style geladen werden muss.

Um die geladene Schriftart in der Storefront zu nutzen, solltest Du den Schalter Schriftart zuweisen (4) aktivieren, damit die Schriftart beim Kompilieren des Themes mit der Standard Schrift ausgetauscht wird.

Wird der Schalter Schriftart zuweisen (4) nicht aktiviert, wird die Schriftart bereits geladen aber in der Storefront nicht genutzt.

Die Schriftart kann auch manuell in der Theme-Konfiguration im Bereich Typografie eingetragen werden oder mit Hilfe von CSS nur bestimmten Elementen zugewiesen werden.

Verfahre mit der Schriftart für Überschriften auf gleiche Weise.

Kompiliere das Theme damit die Änderungen wirksam werden!

Kombinieren von Schriften

Externe Schriftarten können auch mit lokalen oder eigenen Schriftarten kombiniert werden. So kann beispielsweise eine Schriftart für Überschriften aus dem Portfolio der externen Schriften gewählt werden und gleichzeitig eine Schriftart für Fließtexte aus den eigenen Schriften geladen werden.

Gleiche Schriftart für Texte und Überschriften

Sollen Inhalte und Überschriften die selbe Schriftart verwenden, lege diese einfach für beide Bereiche fest. Wir kümmern uns darum, dass nicht zwei Requests mit der selben Schriftart erzeugt werden.