# Eigenen Webfont einrichten (nicht als Hauptschriftart)

**URL:** <https://forum.shopware.com/t/eigenen-webfont-einrichten-nicht-als-hauptschriftart/41246>\
**Category:** Themes & Design\
**Created:** [10. November 2016 um 09:55 UTC](https://forum.shopware.com/t/eigenen-webfont-einrichten-nicht-als-hauptschriftart/41246 "2016-11-10T09:55:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [10. November 2016 um 09:55 UTC](https://forum.shopware.com/t/eigenen-webfont-einrichten-nicht-als-hauptschriftart/41246/1 "2016-11-10T09:55:15Z")

</div>

Hallo,

es gibt zahlreiche Tutorials, wie man eine Schriftart (Webfont) in Shopware als Hauptschriftart einbindet und somit z.B. die Open Sans im Responsive Theme austauschen kann.

Wie gehe ich nun vor, wenn ich z.B. nur die Schriftart der Überschriften durch einen Webfont ersetzen möchte?

Ich habe in meinem eigenen Theme im ordner frontend \> \_public \> src \> fonts meinen Webfont im Format .ttf, .woff2, .eot, .woff liegen.  
Im Ordner frontend \> \_public \> src \> less \> all.less ist eine Datei @import „\_modules/webfonts“ eingebunden.  
Die Datei frontend \> \_public \> src \> less \> \_modules \> webfonts.less sieht wie folgt aus:

```
@font-face {
    font-family:'myfont';
    src: url('../../myfont.eot');
	src: url('../../myfont.eot?#iefix') format('embedded-opentype'),
		url('../../myfont.woff2') format('woff2'),
		url('../../myfont.woff') format('woff'),
		url('../../myfont.ttf') format('truetype');
    unicode-range: U+000D-FB00;
    src: local('myfont'), url("../../myfont.ttf");
}

```

Leider scheint das so nicht zu funktionieren. Kann da jemand einen Fehler entdecken?

---

<div class="post-metadata">

**Author:** ![PXWaldy](https://avatars.discourse-cdn.com/v4/letter/p/aeb1de/32.png) [@PXWaldy](https://forum.shopware.com/u/PXWaldy)\
**Post date:** [14. November 2016 um 15:43 UTC](https://forum.shopware.com/t/eigenen-webfont-einrichten-nicht-als-hauptschriftart/41246/2 "2016-11-14T15:43:51Z")

</div>

Ich habe es so gelöst.

In meiner webfonts.less sieht es so aus:

```
@font-face {
font-family: 'Oswald';
src: url('../../fonts/Oswald-Regular.ttf');
src: url('../../fonts/Oswald-Regular.ttf?#iefix') format('embedded-opentype'),
url('../../fonts/Oswald-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'Amaranth';
src: url('../../fonts/Amaranth-Regular.ttf');
src: url('../../fonts/Amaranth-Regular.ttf?#iefix') format('embedded-opentype'),
url('../../fonts/Amaranth-Regular.ttf') format('truetype');
}

```

Oswald ist im Backend -\> Theme Konfoguration -\> Typografie bei @font-base-stack: als erstes eingetragen.

in meiner detail.less habe ich bei Amaranth als .product–title eingetragen.

```
.product--title {
            .unitize(font-size, 30);
            .unitize(line-height, 45);
            .unitize-margin(10, 0, 10, 0);
            padding: 0;
            font-weight: 300;
            color: #7d7d7d;
            font-family: Amaranth;
        }

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![m23](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/m23/32/13275_2.png) [@m23](https://forum.shopware.com/u/m23)\
**Post date:** [14. November 2016 um 15:47 UTC](https://forum.shopware.com/t/eigenen-webfont-einrichten-nicht-als-hauptschriftart/41246/3 "2016-11-14T15:47:50Z")

</div>

Bei meinem Beispiel war der Pfad falsch. Ein “…/” musste weg, dann hat er die Schriftart gefunden.