> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/theme-manager/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/theme-manager/funktionen/erweitert/google-fonts.md).

# Google Fonts

Lade Schriften aus der Google-Fonts-Bibliothek auf deinen Server und nutze sie in deinem Shop – ohne Verbindung deiner Besucher zu Google.

Mit der Einstellung **Google Fonts** holst du Schriften aus der Google-Fonts-Bibliothek in deinen Shop. Der Theme - Manager lädt die gewählten Schriften einmalig auf deinen Server, danach liefert dein Shop sie von deiner eigenen Domain aus. Die Browser deiner Besucher nehmen dafür keine Verbindung zu Google auf. Welche Schrift für Fließtext und Überschriften gilt, legst du anschließend in deinem Theme fest.

Du findest die Einstellung in der Administration unter **Inhalte › Theme - Einstellungen › Erweitert › Google Fonts**.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-d4be3b8743861dd9232fc14107b466114145557d%2Fgoogle-fonts-hero.webp?alt=media" alt="Produktdetailseite mit installierten Google Fonts"><figcaption><p>Eine Produktdetailseite mit den installierten Schriften „Playfair Display“ für Überschriften und „DM Sans“ für den Fließtext.</p></figcaption></figure>

{% hint style="success" %}
Für das Installieren von Schriften musst du nichts kompilieren. Erst wenn du eine Schrift in deinem Theme einträgst, baut Shopware das Theme neu – das geschieht beim Speichern des Themes automatisch.
{% endhint %}

{% hint style="info" %}
Die Einstellung gilt für deinen ganzen Shop – oben rechts gibt es keine Auswahl des Verkaufskanals. In welchen Verkaufskanälen eine Schrift geladen wird, legst du bei jeder installierten Schrift fest – siehe **Verkaufskanäle**.
{% endhint %}

So bringst du eine neue Schrift in deinen Shop:

1. Verbinde einmalig einen Google-Fonts-API-Schlüssel.
2. Suche Schriften aus und installiere sie auf deinem Server.
3. Trage die Schriften in deinem Theme als Fließtext- und Überschrift-Schriftart ein.

## Schritt 1: API-Schlüssel verbinden

Für den Zugriff auf die Bibliothek braucht der Theme - Manager einen API-Schlüssel von Google. Solange kein Schlüssel verbunden ist, zeigt die Einstellung diese Seite:

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-0b2564ff1295fd0c46a6baf64e330c878f879245%2Fgoogle-fonts-verbinden.webp?alt=media" alt="Google Fonts ohne verbundenen Schlüssel"><figcaption><p>Die Einstellung, solange kein Schlüssel verbunden ist.</p></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Google-Fonts-API-Schlüssel (1)</td><td>Hier fügst du deinen Schlüssel ein. Über das Augen-Symbol im Feld machst du ihn lesbar. Der Schlüssel wird nur genutzt, um die Bibliothek abzurufen und Schriften auf deinen Server herunterzuladen.</td></tr><tr><td>Verbinden (2)</td><td>Prüft den Schlüssel bei Google und speichert ihn. Ist er gültig, erscheint die Bibliothek.</td></tr><tr><td>So bekommst du einen Schlüssel – 3 Schritte (3)</td><td>Eine Kurzanleitung für die Google Cloud Console.</td></tr><tr><td>Google Cloud Console öffnen (4)</td><td>Öffnet die Google Cloud Console in einem neuen Browser-Tab.</td></tr><tr><td>Bereit zur Installation (5)</td><td>Ein Ausschnitt beliebter Schriften aus der Bibliothek.</td></tr></tbody></table>

So verbindest du deinen Schlüssel:

1. Klicke auf **Google Cloud Console öffnen** (4) und melde dich mit deinem Google-Konto an.
2. Erstelle ein neues Projekt oder wähle ein bestehendes aus.
3. Suche in der API-Bibliothek die **Web Fonts Developer API** und klicke auf **Aktivieren**.
4. Erstelle einen API-Schlüssel und kopiere ihn.
5. Füge den Schlüssel im Feld **Google-Fonts-API-Schlüssel** (1) ein und klicke auf **Verbinden** (2).

Ist der Schlüssel falsch oder die Web Fonts Developer API in deinem Google-Projekt nicht aktiviert, erscheint unter dem Feld eine Meldung:

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-43b64a8c647f882785f33567de73eea89884cf5c%2Fgoogle-fonts-schluessel-ungueltig.webp?alt=media" alt="Meldung bei ungültigem Schlüssel"><figcaption><p>Die Meldung bei einem ungültigen Schlüssel.</p></figcaption></figure>

### Der verbundene Schlüssel

Nach dem Verbinden zeigt die Einstellung oben, dass die Verbindung steht.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-eb131c6caad11afac6f9f08d0494ee38f213177e%2Fgoogle-fonts-verbunden.webp?alt=media" alt="Status der Verbindung"><figcaption><p>Die Verbindung zur Google-Fonts-Bibliothek steht.</p></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Status (1)</td><td>„Google-Fonts-API verbunden“ mit der Zahl der verfügbaren Schriftfamilien sowie den ersten und letzten Zeichen deines Schlüssels.</td></tr><tr><td>Schlüssel ändern (2)</td><td>Zeigt wieder das Eingabefeld mit deinem bisherigen Schlüssel. Füge den neuen Schlüssel ein und klicke auf <strong>Verbinden</strong>.</td></tr><tr><td>Trennen (3)</td><td>Entfernt den Schlüssel. Bereits installierte Schriften bleiben auf deinem Server und werden weiter im Shop ausgeliefert. Bearbeiten oder entfernen kannst du sie erst wieder, wenn ein Schlüssel verbunden ist.</td></tr></tbody></table>

{% hint style="info" %}
Erscheint unter **Alle Google Fonts** die Meldung „Die Bibliothek konnte nicht geladen werden.“, konnte der Theme - Manager die Bibliothek nicht von Google abrufen – zum Beispiel, weil dein Schlüssel nicht mehr gültig ist. Verbinde dann über **Schlüssel ändern** einen gültigen Schlüssel. Deine installierten Schriften liefert der Shop in der Zwischenzeit unverändert aus.
{% endhint %}

## Schritt 2: Schriften suchen und installieren

### Die Bibliothek

Unter **Alle Google Fonts** findest du die komplette Bibliothek, die beliebtesten Schriften zuerst. Jede Kachel nennt die Kategorie und die Zahl der verfügbaren Stile. Die Liste zeigt zunächst 24 Schriften; mit **Mehr laden** unter der Liste holst du die nächsten 24.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-01afab60febee9a07119f521926bebae59b91c03%2Fgoogle-fonts-bibliothek.webp?alt=media" alt="Bibliothek mit Suche und Kategorien"><figcaption><p>Die Bibliothek, gefiltert nach „sans“ und der Kategorie „Serifenlos“.</p></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Suche (1)</td><td>Findet Schriften über ihren Namen.</td></tr><tr><td>Kategorien (2)</td><td><strong>Alle</strong>, <strong>Serifenlos</strong>, <strong>Serif</strong>, <strong>Display</strong>, <strong>Handschrift</strong> oder <strong>Monospace</strong>. Ein Klick zeigt nur noch Schriften dieser Kategorie.</td></tr><tr><td>Schrift hinzufügen (3)</td><td>Das Plus-Symbol – oder ein Klick auf die Kachel – öffnet die Auswahl der Schnitte.</td></tr><tr><td>Installiert (4)</td><td>Diese Schrift liegt bereits auf deinem Server. Ein Klick auf die Kachel öffnet ihre Auswahl, um Schnitte zu ergänzen oder zu entfernen.</td></tr></tbody></table>

### Schnitte auswählen und installieren

Eine Schrift besteht aus mehreren Schnitten – etwa normal, fett oder kursiv. Du installierst nur die Schnitte, die du brauchst. Bei einer neuen Schrift ist **Regular** bereits ausgewählt, sofern die Schrift diesen Schnitt hat.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-7cb022ba025d2c53664c04eb810b258318af9f6a%2Fgoogle-fonts-schnitte-waehlen.webp?alt=media" alt="Auswahl der Schnitte für die Schrift Lora" width="380"><figcaption><p>Für die Schrift „Lora“ sind Regular und Bold ausgewählt.</p></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Schriften wählen (1)</td><td>Der Tab mit der Liste der Schnitte. Daneben zeigt der Tab <strong>Vorschau</strong> die Schnitte als Beispielsatz – siehe unten.</td></tr><tr><td>Alle auswählen (2)</td><td>Wählt alle Schnitte aus. Sind alle ausgewählt, heißt der Link <strong>Alle abwählen</strong>.</td></tr><tr><td>Schnitt (3)</td><td>Jeder Schnitt mit Namen und Stärke – meist von 100 (sehr dünn) bis 900 (sehr fett). „Italic“ steht für kursiv. Ein Klick wählt den Schnitt aus oder ab.</td></tr><tr><td>Anzahl (4)</td><td>Wie viele Schnitte ausgewählt sind.</td></tr><tr><td>Installieren (5)</td><td>Lädt die ausgewählten Schnitte auf deinen Server. Eine Meldung bestätigt die Installation, und die Schrift erscheint unter <strong>Auf dem Server installiert</strong>.</td></tr></tbody></table>

{% hint style="info" %}
Installiere nur die Schnitte, die dein Shop braucht – jeder Schnitt ist eine eigene Datei, die deine Besucher laden. Das Standard-Theme von Shopware verwendet vor allem die Stärken Regular (400), SemiBold (600) und Bold (700).
{% endhint %}

### Vorschau

Im Tab **Vorschau** (1) siehst du jeden Schnitt als Beispielsatz. Diese Vorschau lädt die Schrift direkt von Google – aber nur in deiner Administration, wie der Hinweis (2) erklärt. In deinem Shop werden ausschließlich die installierten Schriften von deinem Server ausgeliefert.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-7c9d69256030d48d6f508f76b50955b4d9ecebb1%2Fgoogle-fonts-vorschau.webp?alt=media" alt="Vorschau der Schrift Lora" width="380"><figcaption><p>Die Vorschau der Schrift „Lora“.</p></figcaption></figure>

## Installierte Schriften verwalten

Unter **Auf dem Server installiert** stehen alle Schriften, die auf deinem Server liegen.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-8fa65e04ff4daf52bbe16ef6312eded39f91d838%2Fgoogle-fonts-installiert.webp?alt=media" alt="Installierte Schriften"><figcaption><p>Zwei installierte Schriften mit ihren Schnitten und Verkaufskanälen.</p></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Schrift (1)</td><td>Name und Kategorie der Schrift.</td></tr><tr><td>Bearbeiten (2)</td><td>Öffnet die Auswahl der Schnitte mit den installierten Schnitten. Wähle weitere Schnitte aus oder ab und klicke auf <strong>Installieren</strong>: Neue Schnitte lädt der Theme - Manager herunter, abgewählte löscht er von deinem Server.</td></tr><tr><td>Entfernen (3)</td><td>Löscht die Schrift von deinem Server – nach einer Rückfrage, siehe <strong>Schrift entfernen</strong>.</td></tr><tr><td>Schnitte (4)</td><td>Die installierten Schnitte mit ihrer Stärke.</td></tr><tr><td>Verkaufskanäle (5)</td><td>In welchen Verkaufskanälen die Schrift geladen wird – siehe <strong>Verkaufskanäle</strong>.</td></tr></tbody></table>

Passen nicht alle Schnitte in eine Zeile, zeigt die Karte zunächst nur die erste Zeile. Über **Alle Schnitte anzeigen** (1) klappst du die übrigen auf, über **Weniger anzeigen** wieder zu.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-be602acc8cc8000c90496f4b19d57b268b0c8653%2Fgoogle-fonts-alle-schnitte.webp?alt=media" alt="Schrift mit vielen Schnitten" width="560"><figcaption><p>Bei vielen Schnitten klappst du die Liste auf.</p></figcaption></figure>

### Schrift entfernen

Nach einem Klick auf den Papierkorb fragt der Theme - Manager nach. Der Haken (1) löscht die Schrift mit allen Dateien von deinem Server, das Kreuz (2) bricht ab. Danach liefert dein Shop die Schrift nicht mehr aus.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-adf968f0fcd5aa378769b4f00f06be88b85a8dd0%2Fgoogle-fonts-entfernen.webp?alt=media" alt="Rückfrage beim Entfernen einer Schrift" width="560"><figcaption><p>Die Rückfrage beim Entfernen.</p></figcaption></figure>

{% hint style="warning" %}
Ist die Schrift noch in deinem Theme eingetragen, zeigt dein Shop nach dem Entfernen die Ersatzschrift – zum Beispiel eine Standardschrift des Browsers. Trage dann im Theme eine andere Schrift ein.
{% endhint %}

### Verkaufskanäle

Hast du mehr als einen aktiven Verkaufskanal vom Typ Storefront, zeigt jede installierte Schrift die Zeile **Verkaufskanäle**. Nach der Installation wird eine Schrift in allen Verkaufskanälen geladen – auch in Verkaufskanälen, die du später anlegst. Ein Klick auf einen Verkaufskanal schaltet ihn um:

* **Verkaufskanal mit ×:** Die Schrift wird hier geladen. Ein Klick nimmt den Verkaufskanal heraus.
* **Verkaufskanal mit +** (nur umrandet): Die Schrift wird hier nicht geladen. Ein Klick nimmt den Verkaufskanal wieder auf.

Im Bild oben wird „DM Sans“ nur im Verkaufskanal „Storefront“ geladen, „Playfair Display“ in beiden. Wählst du wieder alle Verkaufskanäle aus, gilt die Schrift auch wieder für künftige Verkaufskanäle. Mit nur einem Verkaufskanal entfällt diese Zeile.

Wird eine Schrift in einem Verkaufskanal nicht geladen, wirkt sie dort nicht – auch wenn sie im Theme eingetragen ist. Dort erscheint dann die Ersatzschrift.

## Schritt 3: Schrift im Shop verwenden

Installierte Schriften stehen deinem Shop zur Verfügung, ändern sein Aussehen aber noch nicht. Welche Schrift für Fließtext und Überschriften gilt, legst du in deinem Theme fest.

1. Klicke in der Seitenleiste des Theme - Managers auf **Themes verwalten** (1) und beim Theme deines Verkaufskanals auf **Theme bearbeiten** (2).

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-bfb8d6f0b5dc35eedb716618a8ce5cf9efb086e2%2Fgoogle-fonts-theme-bearbeiten.webp?alt=media" alt="Theme bearbeiten aufrufen"><figcaption><p>Über „Themes verwalten“ und „Theme bearbeiten“ öffnest du die Einstellungen deines Themes.</p></figcaption></figure>

2. Trage im Tab **Theme-Einstellungen** im Bereich **Typografie** die Schriften ein: **Fließtext-Schriftart** (1) gilt für alle Texte deines Shops, **Überschrift-Schriftart** (2) für die Überschriften. Schreibe den Namen genau wie in der Bibliothek in einfache Anführungszeichen und dahinter, durch ein Komma getrennt, eine Ersatzschrift – zum Beispiel `'DM Sans', sans-serif` oder `'Playfair Display', serif`.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-d0e3113131ee5aa34cdfb80d4cee8940b527ed7a%2Fgoogle-fonts-typografie.webp?alt=media" alt="Schriftarten im Bereich Typografie"><figcaption><p>Die installierten Schriften im Bereich „Typografie“.</p></figcaption></figure>

3. Klicke oben rechts auf **Speichern & Kompilieren** (1). Shopware baut das Theme neu, das dauert einen Moment.

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-838b060434124a0ae23cdfd3738c959fa7705cfc%2Fgoogle-fonts-speichern-kompilieren.webp?alt=media" alt="Speichern und Kompilieren"><figcaption><p>„Speichern &#x26; Kompilieren“ übernimmt die Schriften in dein Theme.</p></figcaption></figure>

4. Klicke daneben auf **Cache löschen**, um das Ergebnis sofort in deinem Shop zu sehen.

{% hint style="info" %}
Die Ersatzschrift hinter dem Komma erscheint, solange die eigentliche Schrift noch lädt oder falls sie in einem Verkaufskanal nicht geladen wird. Üblich sind `sans-serif` für Schriften ohne Serifen und `serif` für Schriften mit Serifen.
{% endhint %}

So verändert sich der Shop – hier die Beschreibung einer Produktdetailseite:

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-d2df9b3d66fa3e3c4cf7b765aea7c173b3e01738%2Fgoogle-fonts-vorher.webp?alt=media" alt="Produktbeschreibung mit der Standardschrift"><figcaption><p>Vorher: Überschrift und Text in „Inter“, der Standardschrift von Shopware.</p></figcaption></figure>

<figure><img src="https://2298866969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7jsLHIar9cIHQMU8bdJQ%2Fuploads%2Fgit-blob-b6540c728f4f89062258afb74baf407bfa684f1c%2Fgoogle-fonts-nachher.webp?alt=media" alt="Produktbeschreibung mit den neuen Schriften"><figcaption><p>Nachher: die Überschrift in „Playfair Display“, der Text in „DM Sans“.</p></figcaption></figure>

{% content-ref url="/pages/ycRgbsHfxjHiHiygh6ym" %}
[Theme bearbeiten](/theme-manager/erste-schritte/theme-bearbeiten.md)
{% endcontent-ref %}

## Datenschutz: Woher kommen die Schriften?

* **Beim Verbinden und Durchsuchen** ruft dein Server die Liste der Schriften mit deinem Schlüssel bei Google ab und hält sie einen Tag lang vor.
* **Beim Installieren** lädt dein Server die ausgewählten Schnitte einmalig von Google herunter und legt sie im öffentlichen Ordner deines Shops ab (`public/rhweb-google-fonts`).
* **Im Shop** liefert dein Server die Schriften von deiner eigenen Domain aus. Die Browser deiner Besucher stellen dafür keine Verbindung zu Google her.
* **Nur die Vorschau** in der Administration lädt Schriften direkt von Google – in deinem Browser, nicht bei deinen Besuchern.

## Speichern

Die Schaltfläche **Speichern** oben rechts brauchst du in dieser Einstellung nicht: Den Schlüssel speichert **Verbinden** nach der Prüfung bei Google, Installieren, Entfernen und die Auswahl der Verkaufskanäle wirken sofort. Den Zwischenspeicher deines Shops leert der Theme - Manager dabei selbst, sodass die Änderung direkt im Shop ankommt.

{% content-ref url="/pages/NNjBHYgFh1Oylj6ZIF0j" %}
[Einstellungen bedienen](/theme-manager/erste-schritte/einstellungen-bedienen.md)
{% endcontent-ref %}