# Schriften lokal einbinden mit Child-Theme

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

{% hint style="info" %}
Diese Anleitung setzt die Verwendung eines **Child-Themes** voraus.

Solltest Du **kein Child-Theme** einsetzen können, verwende die[ allgemeine Anleitung](https://themedocs.zenit.design/tutorials/schriften-lokal-einbinden).
{% endhint %}

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

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

Per CSS/SCSS definierst Du, welche Schriften das Theme laden soll.

#### Pfade anpassen

{% tabs %}
{% tab title="Shopware 6.5" %}
Bevor Du den Code kopierst, passe die Pfade der Url von `../font/` auf **`#{$app-css-relative-asset-path}/font/`** an. Dazu kannst Du direkt im Screenshot markierten **Eingabefeld (1)** den Pfad ganz einfach umschreiben.
{% endtab %}

{% tab title="Shopware 6.4" %}
Bevor Du den Code kopierst, passe die Pfade der Url von `../font/` auf `../assets/font/` an. Dazu kannst Du direkt im Screenshot markierten **Eingabefeld (1)** den Pfad ganz einfach umschreiben.
{% endtab %}
{% endtabs %}

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

#### Code einfügen

Diesen Code kannst Du in die SCSS-Datei des Child-Themes unter `{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/src/scss/base.scss` oder einer darin importierten Datei Deiner Wahl kopieren.

### 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 `font`-Ordner Deines `assets`-Ordners.

{% tabs %}
{% tab title="assets-Ordner" %}
Du findest den `assets`-Ordner i.d.R. unter

```
{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets
```

{% endtab %}

{% tab title="assets-Ordner finden, bei selbst erstelltem Child-Theme" %}
Solltest Du **ein eigenes** Child-Theme angelegt haben, ist der `assets`-Order in der **theme.json (1)** des Themes definiert. Im Abschnitt `asset` findest Du den **Pfad (2)** ausgehend von der theme.json.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-2247c5fd8a1953a1223b90464d6bb8b4e7794951%2Fassets-order-theme.json.png?alt=media)
{% endtab %}
{% endtabs %}

Dort legst Du nun einen Ordner `font` an, sodass die in Schritt 3 angegeben Pfade passen. Der Pfad für die Schriften lautet dann vollständig:

```
{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets/font
```

{% hint style="warning" %}
Achte darauf, dass die **einzelnen Schrift-Dateien** aus der ZIP-Datei, also ohne zusätzlichen Ordner, in den `font-`Ordner hochgeladen werden.
{% endhint %}

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-25ac8f6d758f39bd18bf907f9784e2a3cc59c157%2Fdocs-fonts-server-assets%20\(2\).png?alt=media)

### 4. Schriften in die öffentlichen Verzeichnisse kopieren

In Shopware 6 greift die Storefront jedoch **nicht** direkt auf die `assets`-Dateien in Deinem Theme zurück. Diese werden beim **Installieren / Aktivieren / Update** in das `theme`-Verzeichnis im `public`-Ordner des Shops kopiert.

{% hint style="info" %}
Es erscheint zunächst irreführend die Schriften im assets-Ordner des Themes zu hinterlegen, wenn man diese dann noch in ein anderes Verzeichnis kopieren muss. Es ist dennoch wichtig, die Schriften auch in den Theme-Dateien zu hinterlegen, da bestimmte Aktionen die public-Verzeichnisse löschen und neu erzeugen.
{% endhint %}

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-03eddcba3101430c056a7cf5c6806cbde16f4196%2Ftheme-assets-hash-folder.png?alt=media)

Noch liegen Deine Schriften jedoch im Plugin-Verzeichnis

```
{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets/font
```

aus Schritt 3 und Du kennst den richtigen Ordner noch nicht, in welchem diese kopiert werden müssen.

{% tabs %}
{% tab title="Schriften über Konsolen-Befehl kopieren" %}
Über die Shopware Konsole (SSH-Zugang notwendig) und dem Befehl

```
// Production template
./bin/build-storefront.sh
```

oder für das Development template von Shopware

```
// Development template
./psh.phar storefront:build
```

werden die Dateien aus den assets-Ordner von Erweiterungen und Themes in das richtige Verzeichnis geladen.

{% hint style="warning" %}
Du kennst Dich nicht mit der Shopware Konsole aus und SSH ist die ebenfalls nicht vertraut? im Tab "Schriften über Update kopieren" erklären wir Dir einen alternativen Weg.
{% endhint %}
{% endtab %}

{% tab title="Schriften über Update kopieren" %}
{% hint style="success" %}
Du weißt nicht, wie man die Shopware Konsole bedient? Kein Problem, hier kommt ein alternativer Weg:
{% endhint %}

Navigiere in das Verzeichnis`{root}/custom/plugins/{deinChildTheme}/` auf Deinem Server. Dort befindet sich die `composer.json` des Plugin-Themes. In Zeile 4 solltest Du die Versionsnummer finden.

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

Setze einfach die Versionsnummer um eine Version nach oben. Aus `1.2.0` wird z.B. `1.2.1`. Datei speichern und wieder auf den Server laden. Im Adminbereich des Shops kannst Du nun das **Child-Theme aktualisieren**. Dabei werden die Schriften ebenfalls in den richtigen Ordner kopiert.
{% endtab %}
{% endtabs %}

### 5. 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 %}