# Embedding fonts locally

In this article you will learn how to self-host **your own fonts** or **Google Fonts** respectively how to store them locally on your webserver and how to embed them in your Shopware 6 shop (self-hosted).

{% hint style="warning" %}
**Important**: In the Shopware 6 Cloud, no individual customizations are currently possible!
{% endhint %}

## Preface

In order to easily deposit the font files and the corresponding CSS customizations you should use a separate extension (plugin or app) for individual customizations.

* Please check if there already exists a suitable extension in the [Shopware Community Store](https://store.shopware.com/en/extensions/?p=1\&o=12\&n=21\&c=2069\&shopwareVersion=6).
* Alternatively, you may use the following manual method.

{% hint style="danger" %}
**Attention**: Never edit original files of Shopware or any extensions (plugins, apps or themes)!
{% endhint %}

## Manually embedding fonts

The easiest way is to provide the files in the folder "public" of your Shopware installation.

### 1. Downloading the required Google Fonts

In our example we wish to use the Google font "Titillium Web" for text and headlines in a font weight of "400" and "600". In order to download the fonts, we recommend the free service [google-webfonts-helper](https://gwfh.mranftl.com/fonts).

1. Look for the desired font in the upper left and select it (e.g. "Titillium Web").
2. Specify the required font weights under "**2. Select styles**". (e.g. regular/400 and bold/600)\
   ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-210814b260b118c21d15c95d23249ad88e7acd85%2Ftools--google-webfonts-helper.png?alt=media)
3. As folder prefix under "**3. Copy CSS**" you can leave it at "../fonts/".\
   ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-ab8e3d410a98a6f364bc5fa2ed96d953d71e1b89%2Ftools--google-webfonts-helper-2.png?alt=media)
4. Download the ZIP archive via the button.\
   ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-0c1d61181a92a0be3aac949d6d03823800228f68%2Ftools--google-webfonts-helper-3.png?alt=media)

### 2. Uploading and embedding fonts on the server

1. Unzip the ZIP archive and upload the fonts via FTP to the folder "**Fonts**".\
   Folder path: `public/fonts/`
2. Switch to the folder "**css**" and create the file "**fonts.css**"\
   Folder path: `public/css/`
3. In "fonts.css" copy and paste the CSS instructions of the fonts from section "**3. Copy CSS**". Additional fonts can easily be added under the CSS codes previously embedded. ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-520e1684c97315a7b2a3e413e1770825b5af2cbd%2Ftools--google-webfonts-helper-4.png?alt=media)
4. Save the change to the fonts.css file and upload it again if necessary.

### 3. Configuring ThemeWare®

1. Open ThemeWare® in the Theme Management and switch to the Tab "Layout" => Block "Typography":
   1. Enter your font in the Section "**Text**" and/or "**Headlines**". (e.g. "'Titillium Web', sans-serif")
   2. Enter your font weights in the Section "**Font weight**" (light, normal, bold). (e.g. 400, 400, 600)
   3. Deactivate the option "**Import Google Fonts**" in order not to load the fonts from Google servers.
2. Now switch to the Tab "Others" => Block "Expert settings" => Section "CSS file":
   1. Enter the path to your "fonts.css" into the field "**External CSS file**". (e.g. "yourshop.com/css/fonts.css")
3. Check whether the "Expert mode" (Tab "Others" => Block "Expert settings") is activated so that the CSS file is loaded.
4. Save the settings in order to compile the current theme and activate changes in the storefront.
5. The desired font should be available in the storefront now.

{% hint style="info" %}
**Tip**: Check in the plugin settings ("Extensions" => "My extensions" => "Themes" => "ThemeWare® ...") whether the "Debug mode" is deactivated so that the CSS file is loaded.
{% endhint %}

### 4. Completion

* Check whether fonts are no longer loaded via the Google Fonts API.


---

# 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://knowledge.themeware.design/knowledge-base/tutorials/fonts/embedding-fonts-locally.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.