# Fonts lokal einbinden

Wie du **eigene Fonts** oder **Google Fonts** selber hostest bzw. lokal auf deinem Webserver hinterlegst und dann in deinen Shopware 6 Shop (self-hosted) einbinden kannst, erfährst du in diesem Artikel.

{% hint style="warning" %}
**Wichtig**: In der Shopware 6 Cloud sind aktuell keine individuellen Anpassungen möglich!
{% endhint %}

## Vorwort

Damit du die Font-Dateien und die entsprechenden CSS-Anpassungen problemlos hinterlegen kannst solltest du eine separate Erweiterung (Plugin oder App) für individuellen Anpassungen nutzen.

* Prüfe ob es im [Shopware Community Store](https://store.shopware.com/erweiterungen/?p=1\&o=12\&n=21\&shopwareVersion=6) bereits eine passende Erweiterung gibt.
* Alternativ kannst du die folgende manuelle Methode nutzen.

{% hint style="danger" %}
**Achtung**: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
{% endhint %}

## Fonts manuell einbinden

Der einfachste Weg ist die Dateien im Ordner "public" deiner Shopware Installation bereitzustellen.

### 1. Benötigte Google Fonts herunterladen

In unserem Beispiel möchten wir den Google Font "Titillium Web" für Text und Headlines in einer Strichstärke von "400" und "600" nutzen. Um die Schriftarten herunterzuladen, empfehlen wir den kostenfreien Dienst [google-webfonts-helper](https://gwfh.mranftl.com/fonts).

1. Suche oben links nach der gewünschten Schrift und wähle diese aus (z.B. "Titillium Web").
2. Gebe unter "**2. Select styles**" die benötigten Strichstärken an. (z.B. regular/400 und bold/600)\
   ![](/files/oFXD5MVtcj8LiEK6oXVz)
3. Als Ordner-Präfix unter "**3. Copy CSS**" kannst du es bei "../fonts/" belassen.\
   ![](/files/rOLyizKT5fWut1Kb9t6B)
4. Downloade das ZIP-Archiv über den Button.\
   ![](/files/1RXzt6Bu8BxPH2kuqvtA)

### 2. Schriftarten auf den Server hochladen und einbinden

1. Entpacke das ZIP-Archiv und lade die Fonts per FTP in den Ordner "**fonts**" hoch\
   Ordnerpfad: `public/fonts/`
2. Wechsel in den Ordner "**css**" und erstelle die Datei "**fonts.css**"\
   Ordnerpfad: `public/css/`
3. Hinterlege in der "fonts.css" durch kopieren und einfügen die CSS-Anweisungen der Fonts aus Abschnitt "**3. Copy CSS**". Weitere Schriftarten können einfach unterhalb der zuvor eingebunden CSS-Codes ergänzt\
   ![](/files/FNmCz5g2CmDg16bq4xNY)
4. Speichere die Änderung der Datei "fonts.css" und lade diese ggf. erneut hoch

### 3. ThemeWare® konfigurieren

1. Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Layout" => Bereich "Typografie":
   1. Trage deine Schriftart im Abschnitt "**Text**" und/oder "**Überschriften**" ein. (z.B. "'Titillium Web', sans-serif")
   2. Trage deine Strickstärken im Abschnitt "**Stichstärke**" (light, normal, bold) ein. (z.B. 400, 400, 600)
   3. Deaktiviere die Option "**Google Fonts importieren**" damit die Fonts nicht von Google-Servern geladen werden.
2. Wechsle nun in den Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "CSS-Datei":
   1. Trage im Feld "**Externe CSS-Datei**" den Pfad zu deiner "fonts.css" ein. (z.B. "deinshop.de/css/fonts.css")
3. Prüfe, ob der "Experten-Modus" (Tab "Weiteres" => Bereich "Experten-Einstellungen") aktiviert ist, damit die CSS-Datei geladen wird.
4. Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in der Storefront wirksam werden.
5. Nun sollte die gewünschte Schriftart in der Storefront verfügbar sein.

{% hint style="info" %}
**Tipp**: Prüfe in den Plugin-Einstellungen ("Erweiterungen" => "Meine Erweiterungen" => "Themes" => "ThemeWare® ...") ob der "Debug-Modus" deaktiviert ist, damit die CSS-Datei geladen wird.
{% endhint %}

### 4. Abschluss

* Prüfe ob nun keine Schriften mehr über die Google Fonts API geladen werden.

{% hint style="success" %}
**Tipp**: Wie du prüfst ob dein Shop Schriften über die Google Fonts API importiert erfährst du in diesem Artikel: [Website auf Google Fonts prüfen](/wissensdatenbank/anleitungen/fonts/website-auf-google-fonts-pruefen.md)
{% 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://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/fonts-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.