> 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/fur-entwickler/eigene-fonts-einbinden.md).

# Eigene Fonts einbinden

{% hint style="info" %}
In der [offiziellen Dokumentation von Shopware](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-assets) ist erklärt, wie du eigene Schriften und Assets in einem **Child-Theme** oder einer **Zusatzerweiterung** einbindest. In diesem Beitrag zeige ich dir, wie du die Schriftarten auf deinem Server hinterlegst und unabhängig von Zusatzerweiterungen nutzen kannst.
{% endhint %}

### Schriftarten hochladen

In der Shopware Installation auf deinem Server findest du den Ordner `public/fonts`. Lege dort deine Schriften ab, die du einbinden möchtest:

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

In diesem Beispiel habe ich die Schriftart Open Sans eingebunden.

### Schrifart per Font-Face initialisieren

In meinen Themes kannst du individuelles CSS einbinden. Das ist notwendig, um die Schrift zu initialisieren. Wo du das CSS einbindest, findest du im folgenden Beitrag:

{% content-ref url="/pages/INVqXwx5cnZV3E4mBh7S" %}
[Individueller Code](/shopware-theme/einrichtung/individueller-code.md)
{% endcontent-ref %}

Nutze jetzt folgenden CSS Code um deine Schriften zu initialisieren:

```
@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" %}
Beachte, dass der **Pfad zu deiner Schrift** stimmen muss. Je nachdem, wie du deine Shopware Instanz aufgebaut hast, wird sich der Pfad unterscheiden. In diesem Beispiel habe ich den Standard Pfad zum Fonts Ordner verwendet:

`/fonts/DeinFontsOrdner/deineSchrift.ttf`
{% endhint %}

Anschließend kannst du die Schrift ganz einfach in den Theme-Einstellungen nutzen:

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