Eigene Schriften

Beliebige Webfonts auf den Server laden und nutzen

Neben den schnellen Methoden zum Einbinden von Schriften gibt Dir das Plugin ebenfalls die Möglichkeit eigene Webfonts von beliebigen Quellen auf deinen Server zu laden und dadurch lokal und ohne externen Verbindung zu irgendeinem Dienst zu nutzen. Anstatt die Schriften also vom z.B. Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden.

Wo finde ich Webfonts?

Es gibt im Internet verschiedenste Quellen für Webfonts. Der bekannteste Dienst ist hierbei Google Fonts. Aber auch auf Font Squirrel oder andere Plattformen lassen sich kostenlose Webfonts finden. Kostenpflichtige Webfonts kannst Du beispielsweise bei Adobe Fonts lizensieren.

Die Schriften bei Google Fonts können dort nicht direkt als Webfont heruntergeladen werden - um die Schriften von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von Herokuapp nutzen.

Wie nutze ich Webfonts lokal?

Die folgenden Schritte sind prinzipiell immer gleich - egal ob Du die Schriften von Font Squirrel oder sogar lizensierte Schriften von Adobe Fonts nutzen möchtest. Der jeweilige Anbieter wird Dir immer Schriftdateien zum Download bereitstellen.

Das folgende Beispiel greift die Nutzung von Google Fonts auf:

1. Schriften wählen

In diesem Beispiel nutzen wir den kostenlosen Dienst von Herokuapp und suchen uns eine beliebige Schrift aus. Wir entscheiden uns für die Schriftart Lora und haben uns diese bereits bei Google Fonts angesehen:

Gib den Schriftnamen Lora oben links in der Suche (1) ein und klicke auf das Ergebnis. Google Webfonts Helper bietet die Möglichkeit das Character-Set (2) zu wählen. Für den westeuropäischen Raum ist der Standard Latin.

Im nächsten Schritt müssen die Schriftschnitte(3) gewählt werden, welche verwendet werden sollen. In diesem Beispiel wählen wir regular, italic, 500, 500italic.

Eine Liste der Schriftschnitte findest Du weiter unten: Zuordnung von Namen und Werten

2. Code kopieren? Nicht notwendig!

Den Code anzupassen und in irgendwelche Dateien des Themes zu kopieren ist mit unserem Plugin nicht notwendig. Das Plugin übernimmt diese Aufgabe automatisch für Dich. Also, ab zu Schritt 3!

Optional kannst Du hier noch zwischen Best Support und Modern Browsers (1) wählen. Diese Option legt fest, welche Dateiformate ausgeliefert werden. Es gibt die Dateiformate eot woff woff2 ttf svg

Laut der Kompatibilitäts-Tablle reicht es heutzutage vollkommen aus die Schriften nur noch für moderne Browser bereitzustellen. Das beinhaltet die Dateiformate woff und woff2.

3. Schriften herunterladen

Klicke auf den blauen Button, um die gewählten Schriften auf deinen Computer zu laden. In der Regel werden diese im Downloads-Ordner auf Deinem Computer gespeichert.

Entpacke das Zip-Archiv - Du findest nun alle gewählten Schriftschnitte und Dateiformate: regular, italic, 500, 500italic in den Dateiformaten eot, woff, woff2, ttf, svg - das macht also 4 x 5 = 20 Dateien.

4. Schriften auf den Server laden

Mit einem FTP-Programm (z.B. Filezilla) und deinen FTP-Zugängen schaltest Du dich auf Deinen Server auf und navigierst in das Hauptverzeichnis deines Shops. Darin solltest Du einen Ordner /public/fonts finden. Lade alle heruntergeladenen Schriftschnitte in diesen Ordner.

Bitte erstelle keine Unterordner, da sonst die Dateipfade falsch wären.

5. Konfiguration im Plugin

Die Vorarbeit ist getan - nun kommt die eigentliche Konfiguration in den Plugin-Einstellungen. Dazu muss zunächst die Verwendung von eigenen Schriften (1) aktiv geschaltet werden. Die Schriften wurden bereits in den /public/fonts Ordner (2) geladen werden.

Der Name der Schriftart wird inklusive der generischen Schriftfamilie in das Konfigurationsfeld Schriftart (3) eingetragen. Der Name sowie die generische Schriftfamilie steht in der Regel immer da, wo Du die Schriftart heruntergeladen hast. In diesem Fall stehen Name Lora und die generische Schriftfamilie serif in der Überschrift.

'Lora', serif

Der Schriftname sollte von Anführungszeichen eingeschlossen werden.

Beispiel:

Wähle nun aus, welche Dateiformate (4) verwendet werden sollen. Anhand der Dateiendungen der Schrift-Dateien auf dem Server kannst Du dies bestimmen oder Du schaust einfach nochmal auf der Seite nach.

Beispiel:

Schließlich gibst Du die Dateinamen und den dazugehörigen Schriftschnitt an. Je ein Dateiname pro Zeile.

Da Du die Dateiformate in der Auswahl (4) bereits ausgewählt hast, müssen hier nicht 20 Dateinamen nebst Schriftschnitt angegeben werden. Das Plugin generiert im Hintergrund den richtigen Code.

lora-v27-latin-regular: regular
lora-v27-latin-italic: italic
lora-v27-latin-medium: 500
lora-v27-latin-medium-italic: 500italic

Diese Auflistung erscheint auf den ersten Blick sehr redundant, da der Schriftschnitt im Dateinamen enthalten ist. Prinzipiell kann der Dateiname aber beim Download von einem anderen Anbieter völlig anders aussehen.

Beispiel:

lora-normal-dick: regular
lora-schraegschrift: italic
lora-bisschen-dick: 500
lora-bisschen-dick-und-schraeg: 500italic

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 (6) 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

Eigene Schriftarten können auch mit lokalen oder externen Schriftarten kombiniert werden. So kann beispielsweise eine Schriftart für Überschriften aus dem Portfolio der eigenen Schriften gewählt werden und gleichzeitig eine Schriftart für Fließtexte aus den externen 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.