> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/tutorials/schriften-lokal-einbinden.md).

# Schriften lokal einbinden

{% hint style="success" %}
Diese Anleitung kann für **Google Fonts** und andere **eigene Schriften** genutzt werden.
{% endhint %}

{% hint style="info" %}
Für diese Anleitung ist die Verwendung eines **Child-Themes nicht notwendig**.

Solltest Du ein Child-Theme einsetzen wollen, verwende die Anleitung zur [Einbindung mit Child-Theme.](/tutorials/schriften-lokal-einbinden-mit-child-theme.md)
{% endhint %}

## Fonts lokal einbinden

Anstatt die Schriften vom Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden. Du kannst diese Anleitung auch nutzen, um **eigene Schriften** in Deinen Shop einzubinden.

In dieser Anleitung werden die Schriften in den public-Ordner Deiner Installation hinterlegt.

### 1. Schrift aussuchen

Um die Schriften **als Webfonts** von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von [Herokuapp](https://gwfh.mranftl.com/fonts) nutzen.

{% embed url="<https://gwfh.mranftl.com/fonts>" %}

Gib den Namen der gewünschten Schriftart (in diesem Beispiel ist es `Raleway`) in der **Suche (1)** ein, und wähle die Schriftart aus den **Vorschlägen (2)** aus.

Die **Schriftschnitte (3)** der Schriftart kannst Du daraufhin anhaken.

![](/files/keR0eyBZMWqfjJjxCqfn)

### 2. CSS einfügen

Lege lokal eine CSS-Datei mit dem Namen der Schriftart, z.B. `raleway.css` an und Kopiere den CSS-Code aus dem grauen Kasten in diese Datei hinein.

<figure><img src="/files/pgh1Df3eWMJMkrqnLIUz" alt=""><figcaption></figcaption></figure>

Verbinde Dich per FTP-Client mit Deinem Onlineshop und navigiere in den Ordner `{root}/public/css`. Lade die `raleway.css` Datei in den `css`-Order Deiner Shopware 6 Installation.

<div align="left"><figure><img src="/files/b3OZObUBxe1wLwDlPXa8" alt=""><figcaption></figcaption></figure></div>

Öffne in der Administration Deines Shopware Shops die **Einstellungen (Plugin/App Konfiguration)** unter *Erweiterungen > Meine Erweiterungen > Tab: Themes > Theme \[Variante] > Kontextmenü: Konfiguration*

Aktiviere **Eigene CSS Dateien aktiv (1)** und füge in das **Textfeld (2)** den Link zur CSS-Datei ein. Ressourcen in den public-Ordner Deiner Installation lassen sich mit einem relativen Pfad aufrufen.

```
<link rel="stylesheet" href="/css/raleway.css" >
```

<figure><img src="/files/jYaRaub0cFfq7uuJAJJT" alt=""><figcaption></figcaption></figure>

### 3. Schriften auf den Server laden

Unter Schritt 4 - Download files kannst Du eine Zip-Datei der Schriften herunterladen.

![](/files/3Z70GwadL6evJp3uYVkJ)

Entpacke das heruntergeladene ZIP-Archiv mit den Schriften auf Deinem Computer und lade die **einzelnen Schrift-Dateien** per FTP-Client in den `{root}/public/fonts`-Ordner Deiner Shopware Installation.

<div align="left"><figure><img src="/files/Ym0NQCWlbGTwIWVlp49u" alt=""><figcaption></figcaption></figure></div>

### 4. Theme-Konfiguration

#### Verbindung zu Google Fonts kappen

Zu allererst muss dem Theme mitgeteilt werden, dass die eingetragenen Schriften nicht mehr von den Google Servern geladen werden soll. `Deaktiviere` dazu den Haken bei **Lade Schriften von Google (1)**.

![Schriften laden deaktivieren, damit keine Verbindung mehr zu Google aufgebaut wird.](/files/PUa4SX0FvvNHPPOzJwAJ)

#### Schriften zuweisen

Trage den Namen der Schriften, z.B. `'Raleway', sans-serif` inklusive der [generischen Schriftfamilie](https://docs-sw6.zenit.design/apps/font-change/generische-schriftfamilie) in die Felder **Schriftart Text (1)** und **Schriftart Überschrift (2**) ein. Schriftart Text und Schriftart Überschrift können hierbei natürlich auch verschiedene Schriftfamilien sein.

Damit die Felder der **Custom Schriften (Google Fonts oder selbst gehostet)** verwendet werden, müssen in den Felder **Schriftart Text (5)** und **Schriftart Überschrift (6)** auf den Wert `--- Verwende 'Eigene Schriftarten' ---` gestellt werden.

![](/files/SSIRbgeWD2uqYbDOzsph)

{% hint style="warning" %}
Die **Schriftstärken (3, 4)** müssen hierbei **nicht angegeben** werden, da diese im CSS-Code aus Schritt 3 hinterlegt werden und nur zum Laden über die Google Server verwendet wurden.
{% endhint %}