# Embed fonts locally

{% hint style="success" %}
These instructions can be used for Google Fonts and other custom fonts.
{% endhint %}

{% hint style="info" %}
For this tutorial, the use of a **child theme is not necessary**.\
\
If you want to use a child theme, use the instructions for [integration with child-theme](https://themedocs.zenit.design/en/tutorials/embed-fonts-locally-with-child-theme).
{% endhint %}

## Embed fonts locally

Instead of loading the fonts from the Google server, you can also place them locally on your own server and embed them. You can also use this tutorial to **include your own webfonts** in your store.

In this tutorial, the fonts are placed in the public folder of your Shopware installation.

### 1. Choose font

To download the fonts as web fonts from Google Fonts, you can use the free service of [Herokuapp](https://gwfh.mranftl.com/fonts).

{% embed url="<https://gwfh.mranftl.com/fonts>" %}

Enter the name of the font you want (in this example it is "Raleway") in the **search (1)** and select the font from the **suggestions (2)**.

You can then choose **font styles (3)** of the font.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MfINmLyZACqCD7fqClX%2F-MfIPYzQLyREmSCvlSUf%2Fdocs-herokuapp-fonts-search.png?alt=media\&token=406ed2a5-b846-4cf7-a43c-14268b1dccf8)

### 2. Insert CSS

Create a CSS file locally with the name of the font, e.g. `raleway.css` and copy the CSS code from the gray box into this file.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FPrqMHgyu0N3x1LvAcuFy%2Fdocs-herokuapp-copy-css-without-any-changes.png?alt=media&#x26;token=880b3efa-f80d-4f05-88c0-3e3bc98d6ff2" alt=""><figcaption></figcaption></figure>

Connect to your online store via FTP client and navigate to the `{root}/public/css` folder. Load the `raleway.css` file into the css folder of your Shopware 6 installation.

<div align="left"><figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FVE3BRzWGrz3kNwXePfEK%2Fdocs-de-public-css-folder-css-file.png?alt=media&#x26;token=f92cc361-1e73-420e-8b6e-34e1500a5f76" alt=""><figcaption></figcaption></figure></div>

In the administration of your Shopware shop, open the settings (plugin/app configuration) of pur theme under *Extensions > My Extensions > Tab: Themes > Theme \[Variant] > Context Menu: Configuration*

**Enable custom CSS files (1)** and insert the link to the CSS file in the **text field (2)**. Resources in the public folder of your installation can be accessed with a relative path.

```
<link rel="stylesheet" href="/css/raleway.css" >
```

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FqRwpWqnJydFzlBqGXe50%2Fdocs-en-config-custom-fonts-url-custom-css-files.png?alt=media&#x26;token=9d83b867-2e25-4e41-8016-dca95126705f" alt=""><figcaption></figcaption></figure>

### 3. Upload fonts to the server

Under Step 4 - "Download files" you can download a zip file of the fonts.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MfINmLyZACqCD7fqClX%2F-MfIRacRV7i-3urhCfft%2Fdocs-herokuapp-download.png?alt=media\&token=65ba4c8c-19ab-414f-83ab-327fa9539a69)

Unzip the downloaded ZIP archive with the fonts on your computer and upload the individual font files via FTP client to the `{root}/public/fonts` folder of your Shopware installation.

<div align="left"><figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FA0ODEnm8dEQdO7Pbh3NG%2Fdocs-de-public-fonts-folder-font-files.png?alt=media&#x26;token=8d86b827-593b-43ca-9684-0702c898c5b7" alt=""><figcaption></figcaption></figure></div>

### 4. Theme configuration

#### Disable connection to Google Fonts

Now you have to tell the theme that the fonts you would like to use should not be loaded from the Google servers. Uncheck the checkbox **Load fonts from Google (1)**.

![Schriften laden deaktivieren, damit keine Verbindung mehr zu Google aufgebaut wird.](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FeDYYLbyFfU6CxmYSs12d%2Fdocs-en-tutorials-embed-fonts-locally-config-theme-typo-colors-fonts.png?alt=media\&token=c9028a62-4e67-4ea4-921b-2dbb41312332)

#### Assign fonts

Enter the name of the fonts, e.g. `'Raleway', sans-serif` including the [generic font-family](https://docs-sw6.zenit.design/apps/font-change/generische-schriftfamilie) into the fields **Font type text (1)** and **Font type headline (2)**. Font type text and Font type headline can of course be different font families.

In order to use the Custom font fields (Google Fonts or self-hosted), the **Font-type text (5)** and **Font -type headline (6)** fields must be set to the value - `--- Use 'Custom fonts' ---`.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FEVBLfgjAS9Ifdd5rZilm%2Fdocs-en-tutorials-embed-fonts-locally-config-theme-typo-colors-fonts-2.png?alt=media\&token=83b91118-b0f4-4bd8-9cbc-ab2ea6b068a7)

{% hint style="warning" %}
The **Font weights (3, 4)** do not need to be specified here, as they are defined in the CSS code from step 2 and were only used for loading via the Google servers.
{% endhint %}