# Embed fonts locally with child-theme

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

{% hint style="info" %}
This guide requires the use of a **child theme.**

If you do not want to use a child theme, use the [basic instructions](https://themedocs.zenit.design/en/tutorials/embed-fonts-locally).
{% 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 fonts** in your store.

### 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 the **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. CSS einfügen

Via CSS/SCSS you define which fonts the theme should load.

#### Customize paths

{% tabs %}
{% tab title="Shopware 6.5" %}
Before you copy the code, adjust the paths of the url from `../font/` to **`#{$app-css-relative-asset-path}/font/`**. To do this, you can easily rewrite the path directly in the **input field (1)** marked in the screenshot below.
{% endtab %}

{% tab title="Shopware 6.4" %}
Before you copy the code, adjust the paths of the url from `../font/` to `../assets/font/`. To do this, you can easily rewrite the path directly in the **input field (1)** marked in the screenshot below.
{% endtab %}
{% endtabs %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2Fhq3igk71OoR0iWGLDOHY%2Fdocs-herokuapp-css.png?alt=media\&token=1f4dc5d6-af71-4e36-bed0-c635be9a3519)

#### Insert code

You can copy this code into the SCSS file of the child theme at `{root}/custom/plugins/{yourChildTheme}/src/Resources/app/storefront/src/scss/base.scss` or a file of your choice imported into it.

### 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 into the `font` folder of your `assets` folder.

{% tabs %}
{% tab title="assets folder" %}
You can find the `assets` folder in&#x20;

```
{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets
```

{% endtab %}

{% tab title="find assets folder " %}
If you have created your own child theme, the assets folder is defined in the **theme.json (1)** of the theme. In the asset section you will find the **path (2)** starting from the theme.json.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MQmeou-AqcpVzADRp_w%2F-MQmg9tzfI7rustu5rIW%2Fassets-order-theme.json.png?alt=media\&token=0a217dd6-7690-44a3-81ec-889a76ffaf20)
{% endtab %}
{% endtabs %}

In the `assets` folder you create a subfolder `font`, so that the paths given in step 2 fit. The path for the fonts is now complete:

```
{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets/font
```

{% hint style="warning" %}
Make sure that the individual font files are uploaded to the font folder from the ZIP file, i.e. without an additional folder.
{% endhint %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FXgcqFkvmWGvU6fv65bGD%2Fdocs-en-fonts-server-assets.png?alt=media\&token=455e7694-c698-4a85-98e3-00e897958783)

### 4. Copy fonts to the public directories

In Shopware 6, however, the storefront does not directly access the assets files in your theme. These files are copied to the theme directory in the public folder of the store when you install / activate / update your child-theme.

{% hint style="info" %}
At first it seems misleading to store the fonts in the assets folder of the theme if you then have to copy them to another directory. However, it is important to store the fonts in the theme files as well, since certain actions clean up the public folders and recreate them with the assets from extensions.
{% endhint %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F0mqqRg0r4e7I3ML0jOoi%2Fdocs-en-assets-hash-folder.png?alt=media\&token=a5676b38-c090-4837-b725-76f6c2aac57c)

However, your fonts are still in the plugin directory from step 2 and you don't yet know the correct folder to copy them to.

```
{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets/font
```

{% tabs %}
{% tab title="Copy fonts via console command" %}
Via the Shopware console (SSH access required) and the command

```
// Production template
./bin/build-storefront.sh
```

or for the development template of Shopware

```
// Development template
./psh.phar storefront:build
```

the files from the assets folder of extensions and themes are loaded into the correct directory.
{% endtab %}

{% tab title="Copy fonts via update" %}
{% hint style="success" %}
You don't know how to use the Shopware console? No problem, here comes an alternative way:
{% endhint %}

Navigate to the `{root}/custom/plugins/{yourChildTheme}/` directory on your server. There you will find the composer.json of the child theme plugin. In line 4 you should find the version number.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MQsEStscsH_tKNE2-pi%2F-MQsJ7nn8hCtTckOpLWE%2Fcomposer-json.png?alt=media\&token=2cc7b756-4bdf-4145-8bc6-a75b9d2509af)

Just set the version number one version up. For example, `1.2.0` becomes `1.2.1`. Save the file and upload it to the server again. In the extensions area of the administration you can now update the child theme. The fonts will then be copied to the correct folder.
{% endtab %}
{% endtabs %}

### 5. 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 %}