> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/shopware-theme/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/shopware-theme/en/for-developers/integrate-your-own-fonts.md).

# Integrate your own fonts

{% hint style="info" %}
The[ official Shopware documentation](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-assets.html) explains how to integrate your own fonts and assets into a **child theme** or an add-on extension. In this article, I will show you how to store the fonts on your server and use them independently of **additional extensions**.
{% endhint %}

### Upload your Fonts

In the Shopware installation on your server, you will find the folder `public/fonts`. Store the fonts you want to integrate there:

<div align="left"><figure><img src="/files/0Fxj8OQtBDF3HHGHX5a9" alt=""><figcaption></figcaption></figure></div>

In this example, I have included the Open Sans font.

### Initialize font via font-face

You can integrate individual CSS in my themes. This is necessary to initialize the font. You can find out where to integrate the CSS in the following article:

{% content-ref url="/pages/INVqXwx5cnZV3E4mBh7S" %}
[Individual Code](/shopware-theme/en/setup/individual-code.md)
{% endcontent-ref %}

Now use the following CSS code to initialize your fonts:

```
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/Open Sans/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/Open Sans/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/Open Sans/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/Open Sans/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/Open Sans/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/Open Sans/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

```

{% hint style="info" %}
Please note that the **path to your font** must be correct. Depending on how you have set up your Shopware instance, the path will differ. In this example, I have used the default path to the fonts folder:

`/fonts/yourFontFolder/yourFont.ttf`
{% endhint %}

You can then simply use the font in the theme settings:

<div align="left"><figure><img src="/files/sv8e3088nbprxiObBreK" alt=""><figcaption></figcaption></figure></div>