> 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

Anleitung zum lokalem Einbinden von Google Fonts

{% 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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-6b31e69f29b3e05c465668fb2b6b799405e3a2eb%2Fdocs-herokuapp-fonts-search.png?alt=media)

### 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-daf1c0f7ba5fd19dc5845ab1b7ad0d4d2993ad41%2Fdocs-herokuapp-copy-css-without-any-changes.png?alt=media" 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-02a2e0de17b5a4768c3dd0f8733c45cb31662d2c%2Fdocs-de-public-css-folder-css-file.png?alt=media" 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-e0eace7e9b29ced7f0b062ca63e67246d542bae1%2Fdocs-de-config-custom-fonts-url-custom-css-files.png?alt=media" alt=""><figcaption></figcaption></figure>

### 3. Schriften auf den Server laden

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-db09bbc3b71b68ee66ffde008321c1991c311fc2%2Fdocs-herokuapp-download.png?alt=media)

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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-03f0b227b028c8f99af7e8d920993755e91d5e13%2Fdocs-de-public-fonts-folder-font-files.png?alt=media" 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.](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FXz83Z77K59laUal0ODTh%2Fdocs-de-tutorials-embed-fonts-locally-config-theme-typo-colors-fonts.png?alt=media\&token=f96b63c4-ff4c-4516-b790-ce8646d8be5d)

#### 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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Forcfa6zZpGNApUWiAgRF%2Fdocs-de-tutorials-embed-fonts-locally-config-theme-typo-colors-fonts-2.png?alt=media\&token=d350e276-e7ef-4e00-bf9f-90b5404ba5b7)

{% 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 %}