Externe Schriften (Google Fonts)
Externe Fonts automatisch einbinden mit Google Fonts Api
Last updated
Externe Fonts automatisch einbinden mit Google Fonts Api
Last updated
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.
Besuche nun die Seite von Google Fonts um Dir eine Schriftart auszusuchen, in unserem Beispiel entscheiden wir uns für Rubik:
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.
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!
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.
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.
