> 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/en/features/advanced/google-fonts.md).

# Google Fonts

Load fonts from the Google Fonts library onto your server and use them in your shop – without your visitors connecting to Google.

With the **Google Fonts** setting you bring fonts from the Google Fonts library into your shop. The Theme - Manager downloads the fonts you choose onto your server once, and from then on your shop delivers them from your own domain. Your visitors’ browsers do not connect to Google for this. Which font applies to body text and headlines is then set in your theme.

You find the setting in the administration under **Content › Theme - Settings › Advanced › Google Fonts**.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-5c7689ce77b623633b9a5c740649131dcf126798%2Fgoogle-fonts-hero.webp?alt=media" alt="Product detail page with installed Google Fonts"><figcaption><p>A product detail page with the installed fonts “Playfair Display” for headlines and “DM Sans” for body text.</p></figcaption></figure>

{% hint style="success" %}
You do not have to compile anything to install fonts. Only when you enter a font in your theme does Shopware rebuild the theme – this happens automatically when you save the theme.
{% endhint %}

{% hint style="info" %}
The setting applies to your whole shop – there is no sales channel selection at the top right. In which sales channels a font is loaded is set for each installed font – see **Sales channels**.
{% endhint %}

This is how you bring a new font into your shop:

1. Connect a Google Fonts API key once.
2. Pick fonts and install them on your server.
3. Enter the fonts in your theme as the body text font and the headline font.

## Step 1: Connect the API key

To access the library, the Theme - Manager needs an API key from Google. As long as no key is connected, the setting shows this page:

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-236f989442040dad6e12234b162a4cf73ca8fb9e%2Fgoogle-fonts-verbinden.webp?alt=media" alt="Google Fonts without a connected key"><figcaption><p>The setting as long as no key is connected.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Google Fonts API key (1)</td><td>This is where you paste your key. With the eye icon in the field you make it readable. The key is only used to retrieve the library and to download fonts onto your server.</td></tr><tr><td>Connect (2)</td><td>Checks the key with Google and saves it. If it is valid, the library appears.</td></tr><tr><td>How to get a key — 3 steps (3)</td><td>A short guide for the Google Cloud Console.</td></tr><tr><td>Open Google Cloud Console (4)</td><td>Opens the Google Cloud Console in a new browser tab.</td></tr><tr><td>Ready to install (5)</td><td>A selection of popular fonts from the library.</td></tr></tbody></table>

This is how you connect your key:

1. Click **Open Google Cloud Console** (4) and log in with your Google account.
2. Create a new project or choose an existing one.
3. In the API library, search for the **Web Fonts Developer API** and click **Enable**.
4. Create an API key and copy it.
5. Paste the key into the field **Google Fonts API key** (1) and click **Connect** (2).

If the key is wrong or the Web Fonts Developer API is not enabled in your Google project, a message appears below the field:

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-e6d28db746ac476a9e779494f2cc2c9560864554%2Fgoogle-fonts-schluessel-ungueltig.webp?alt=media" alt="Message for an invalid key"><figcaption><p>The message for an invalid key.</p></figcaption></figure>

### The connected key

After connecting, the setting shows at the top that the connection is established.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-af3f61a8667885bf5a7f7b1032da30ed54812ed9%2Fgoogle-fonts-verbunden.webp?alt=media" alt="Connection status"><figcaption><p>The connection to the Google Fonts library is established.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Status (1)</td><td>“Google Fonts API connected” with the number of available font families as well as the first and last characters of your key.</td></tr><tr><td>Change key (2)</td><td>Shows the input field again with your current key. Paste the new key and click <strong>Connect</strong>.</td></tr><tr><td>Disconnect (3)</td><td>Removes the key. Fonts that are already installed stay on your server and are still delivered in the shop. You can only edit or remove them again once a key is connected.</td></tr></tbody></table>

{% hint style="info" %}
If the message “The library could not be loaded.” appears under **All Google Fonts**, the Theme - Manager could not retrieve the library from Google – for example because your key is no longer valid. In that case connect a valid key via **Change key**. In the meantime the shop keeps delivering your installed fonts unchanged.
{% endhint %}

## Step 2: Search for and install fonts

### The library

Under **All Google Fonts** you find the complete library, the most popular fonts first. Each tile names the category and the number of available styles. The list first shows 24 fonts; with **Load more** below the list you fetch the next 24.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-88c33b9a6a79cf618885774ece2da333374e5e7b%2Fgoogle-fonts-bibliothek.webp?alt=media" alt="Library with search and categories"><figcaption><p>The library, filtered by “sans” and the category “Sans Serif”.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Search (1)</td><td>Finds fonts by their name.</td></tr><tr><td>Categories (2)</td><td><strong>All</strong>, <strong>Sans Serif</strong>, <strong>Serif</strong>, <strong>Display</strong>, <strong>Handwriting</strong> or <strong>Monospace</strong>. A click shows only fonts of this category.</td></tr><tr><td>Add font (3)</td><td>The plus symbol – or a click on the tile – opens the selection of styles.</td></tr><tr><td>Installed (4)</td><td>This font is already on your server. A click on the tile opens its selection to add or remove styles.</td></tr></tbody></table>

### Choosing and installing styles

A font consists of several styles – for example normal, bold or italic. You only install the styles you need. For a new font, **Regular** is already selected, provided the font has this style.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-f05bb9d783efcdcaf1cc3d7afc23784e08e9aee4%2Fgoogle-fonts-schnitte-waehlen.webp?alt=media" alt="Selecting the styles for the font Lora" width="380"><figcaption><p>For the font “Lora”, Regular and Bold are selected.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Select fonts (1)</td><td>The tab with the list of styles. Next to it, the <strong>Preview</strong> tab shows the styles as a sample sentence – see below.</td></tr><tr><td>Select all (2)</td><td>Selects all styles. If all are selected, the link is called <strong>Deselect all</strong>.</td></tr><tr><td>Style (3)</td><td>Each style with its name and weight – usually from 100 (very thin) to 900 (very bold). “Italic” stands for slanted. A click selects or deselects the style.</td></tr><tr><td>Count (4)</td><td>How many styles are selected.</td></tr><tr><td>Install (5)</td><td>Downloads the selected styles onto your server. A message confirms the installation, and the font appears under <strong>Installed on server</strong>.</td></tr></tbody></table>

{% hint style="info" %}
Only install the styles your shop needs – each style is a separate file that your visitors load. The Shopware default theme mainly uses the weights Regular (400), SemiBold (600) and Bold (700).
{% endhint %}

### Preview

On the **Preview** tab (1) you see each style as a sample sentence. This preview loads the font directly from Google – but only in your administration, as the note (2) explains. In your shop, only the installed fonts are delivered from your server.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-fcb0a17cf23a402fb197c6935ab82c8e580417bd%2Fgoogle-fonts-vorschau.webp?alt=media" alt="Preview of the font Lora" width="380"><figcaption><p>The preview of the font “Lora”.</p></figcaption></figure>

## Managing installed fonts

Under **Installed on server** you find all fonts that are on your server.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-803fecca450f00b7f61d4fb288b24a7b52d0418c%2Fgoogle-fonts-installiert.webp?alt=media" alt="Installed fonts"><figcaption><p>Two installed fonts with their styles and sales channels.</p></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Font (1)</td><td>Name and category of the font.</td></tr><tr><td>Edit (2)</td><td>Opens the selection of styles with the installed styles. Select or deselect further styles and click <strong>Install</strong>: the Theme - Manager downloads new styles and deletes deselected ones from your server.</td></tr><tr><td>Remove (3)</td><td>Deletes the font from your server – after a confirmation, see <strong>Removing a font</strong>.</td></tr><tr><td>Styles (4)</td><td>The installed styles with their weight.</td></tr><tr><td>Sales channels (5)</td><td>In which sales channels the font is loaded – see <strong>Sales channels</strong>.</td></tr></tbody></table>

If not all styles fit on one line, the card first shows only the first line. With **Show all styles** (1) you expand the rest, with **Show less** you collapse them again.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-0d0855b74b31e1a4f52afec92558fdded512bcc7%2Fgoogle-fonts-alle-schnitte.webp?alt=media" alt="Font with many styles" width="560"><figcaption><p>With many styles you expand the list.</p></figcaption></figure>

### Removing a font

After a click on the wastebasket, the Theme - Manager asks for confirmation. The tick (1) deletes the font with all its files from your server, the cross (2) cancels. Afterwards your shop no longer delivers the font.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-adf968f0fcd5aa378769b4f00f06be88b85a8dd0%2Fgoogle-fonts-entfernen.webp?alt=media" alt="Confirmation when removing a font" width="560"><figcaption><p>The confirmation when removing.</p></figcaption></figure>

{% hint style="warning" %}
If the font is still entered in your theme, your shop shows the fallback font after removal – for example a standard font of the browser. In that case enter a different font in the theme.
{% endhint %}

### Sales channels

If you have more than one active sales channel of the type Storefront, each installed font shows the row **Sales channels**. After installation, a font is loaded in all sales channels – including sales channels you create later. A click on a sales channel switches it:

* **Sales channel with ×:** the font is loaded here. A click takes the sales channel out.
* **Sales channel with +** (outlined only): the font is not loaded here. A click adds the sales channel again.

In the image above, “DM Sans” is loaded only in the sales channel “Storefront”, “Playfair Display” in both. If you select all sales channels again, the font also applies to future sales channels again. With only one sales channel this row is omitted.

If a font is not loaded in a sales channel, it has no effect there – even if it is entered in the theme. The fallback font appears there instead.

## Step 3: Use the font in the shop

Installed fonts are available to your shop, but they do not change its appearance yet. Which font applies to body text and headlines is set in your theme.

1. In the sidebar of the Theme - Manager, click **Manage Themes** (1) and, for the theme of your sales channel, **Edit theme** (2).

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-2b529b59abbb3cad3d5092381d55a361a74b4592%2Fgoogle-fonts-theme-bearbeiten.webp?alt=media" alt="Opening Edit theme"><figcaption><p>Via “Manage Themes” and “Edit theme” you open the settings of your theme.</p></figcaption></figure>

2. On the **Theme settings** tab, in the **Typography** area, enter the fonts: **Body text font** (1) applies to all texts of your shop, **Headline font** (2) to the headlines. Write the name exactly as in the library in single quotation marks and, after it, separated by a comma, a fallback font – for example `'DM Sans', sans-serif` or `'Playfair Display', serif`.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-3bd544cc1c16f59ce37e6ba443673e49b4a3f275%2Fgoogle-fonts-typografie.webp?alt=media" alt="Fonts in the Typography area"><figcaption><p>The installed fonts in the “Typography” area.</p></figcaption></figure>

3. At the top right, click **Save & compile** (1). Shopware rebuilds the theme, which takes a moment.

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-a7c7d126ba6cc6f19c585dee184b9b6dffa3df40%2Fgoogle-fonts-speichern-kompilieren.webp?alt=media" alt="Save and compile"><figcaption><p>“Save &#x26; compile” applies the fonts to your theme.</p></figcaption></figure>

4. Next to it, click **Clear cache** to see the result in your shop immediately.

{% hint style="info" %}
The fallback font after the comma appears while the actual font is still loading or if it is not loaded in a sales channel. Common choices are `sans-serif` for fonts without serifs and `serif` for fonts with serifs.
{% endhint %}

This is how the shop changes – here the description of a product detail page:

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-cef6e06c6c25776df4c5bb62b741582d9097083a%2Fgoogle-fonts-vorher.webp?alt=media" alt="Product description with the default font"><figcaption><p>Before: headline and text in “Inter”, the default font of Shopware.</p></figcaption></figure>

<figure><img src="https://3517456628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmlPb6ICG6kHEJhGjJ5wl%2Fuploads%2Fgit-blob-621532e8aaad7f3ee62834ed589063d3d6589064%2Fgoogle-fonts-nachher.webp?alt=media" alt="Product description with the new fonts"><figcaption><p>After: the headline in “Playfair Display”, the text in “DM Sans”.</p></figcaption></figure>

{% content-ref url="/pages/ehaQpph7n9qWAw7yCxEy" %}
[Editing a Theme](/theme-manager/en/getting-started/editing-a-theme.md)
{% endcontent-ref %}

## Privacy: where do the fonts come from?

* **When connecting and browsing,** your server retrieves the list of fonts from Google with your key and keeps it for one day.
* **When installing,** your server downloads the selected styles from Google once and stores them in the public folder of your shop (`public/rhweb-google-fonts`).
* **In the shop,** your server delivers the fonts from your own domain. Your visitors’ browsers do not connect to Google for this.
* **Only the preview** in the administration loads fonts directly from Google – in your browser, not in your visitors’.

## Saving

You do not need the **Save** button at the top right in this setting: **Connect** saves the key after the check with Google; installing, removing and the choice of sales channels take effect immediately. The Theme - Manager clears the cache of your shop itself, so the change reaches the shop directly.

{% content-ref url="/pages/Gzdxdnu6wf1J33zGM8aY" %}
[Working with Settings](/theme-manager/en/getting-started/working-with-settings.md)
{% endcontent-ref %}