> For the complete documentation index, see [llms.txt](https://docs-sw6.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-sw6.zenit.design/apps/font-change/eigene-schriften.md). # Eigene Schriften 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](https://fonts.google.com/). Aber auch auf [Font Squirrel](https://www.fontsquirrel.com/) oder andere Plattformen lassen sich kostenlose Webfonts finden. Kostenpflichtige Webfonts kannst Du beispielsweise bei [Adobe Fonts](https://fonts.adobe.com) 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](https://google-webfonts-helper.herokuapp.com/fonts) nutzen. {% embed url="" %} Google Schriften herunterladen {% endembed %} ## 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](https://google-webfonts-helper.herokuapp.com/fonts) und suchen uns eine beliebige Schrift aus. Wir entscheiden uns für die Schriftart `Lora` und haben uns diese bereits bei [Google Fonts](https://fonts.google.com/?query=Lora) angesehen: ![](/files/-MTGlN3WIJx0wWhAshXi) 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`. {% hint style="info" %} Eine Liste der Schriftschnitte findest Du weiter unten: [Zuordnung von Namen und Werten](https://docs-sw6.zenit.design/plugins/font-change/eigene-schriften#zuordnung-von-namen-und-werten) {% endhint %} ### 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! {% hint style="success" %} 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](https://caniuse.com/woff) reicht es heutzutage vollkommen aus die Schriften nur noch für moderne Browser bereitzustellen. Das beinhaltet die Dateiformate `woff` und `woff2`. {% endhint %} ![](/files/-MTGqbdFyPGd8k5RARl2) ### 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. ![](/files/-MTGpMNn3kNd_wwbWWr9) 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. ![](/files/-MTGps3L2Xo9kBMZggNY) ### 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. {% hint style="warning" %} Bitte erstelle keine Unterordner, da sonst die Dateipfade falsch wären. {% endhint %} ![](/files/-MTGsGru5VM0l0Yr_thn) ### 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. ![](/files/-MTGuv2X3Ctg8Zf9Q313) Der Name der Schriftart wird inklusive der [generischen Schriftfamilie](/apps/font-change/generische-schriftfamilie.md) in das Konfigurationsfeld **Schriftart (3)** eingetragen. Der Name sowie die [generische Schriftfamilie](/apps/font-change/generische-schriftfamilie.md) steht in der Regel immer da, wo Du die Schriftart heruntergeladen hast. In diesem Fall stehen Name `Lora` und die [generische Schriftfamilie](/apps/font-change/generische-schriftfamilie.md) `serif` in der Überschrift. ``` 'Lora', serif ``` {% hint style="info" %} Der Schriftname sollte von Anführungszeichen eingeschlossen werden. {% endhint %} Beispiel: ![](/files/-MTGu4VLzYagd8Ba9g8E) 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: ![](/files/-MTGvlBOuCGyc93kaTgi) Schließlich gibst Du die Dateinamen und den dazugehörigen Schriftschnitt an. Je ein Dateiname pro Zeile. {% hint style="success" %} 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. {% endhint %} ``` 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. {% hint style="info" %} 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. {% endhint %} Verfahre mit der Schriftart für Überschriften auf gleiche Weise. {% hint style="warning" %} Kompiliere das Theme damit die Änderungen wirksam werden! {% endhint %} ### 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. ### Zuordnung von Namen und Werten | Wert | Deutsch | Englisch | | ---- | ------------ | ------------------------- | | 100 | fein | Thin (Hairline) | | 200 | extraleicht | Extra Light (Ultra Light) | | 300 | leicht | Light | | 400 | normal | Normal (Regular) | | 500 | medium | Medium | | 600 | halbfett | Semi Bold (Demi Bold) | | 700 | fett | Bold | | 800 | extrafett | Extra Bold (Ultra Bold) | | 900 | schwarz | Black (Heavy) | | 950 | extraschwarz | Extra Black (Ultra Black) |