# 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="https://content.gitbook.com/content/0nEFbZVS3YTby86Jhb9H/blobs/rhnO9qsD72Lb576G2fYC/docs-fonts.PNG" 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="../setup/individual-code" %}
[individual-code](https://docs.rh-webdesign.com/shopware-theme/en/setup/individual-code)
{% 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="https://3562943889-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0nEFbZVS3YTby86Jhb9H%2Fuploads%2F07ba9IOVZ7DPhqV7UMMn%2FBildschirmfoto%202023-12-07%20um%2023.00.26.png?alt=media&#x26;token=9661bedb-7e7d-4fef-bb2d-ffbd63f6662b" alt=""><figcaption></figcaption></figure></div>