# 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.](https://themedocs.zenit.design/tutorials/schriften-lokal-einbinden-mit-child-theme)
{% 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs.zenit.design/tutorials/schriften-lokal-einbinden.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.