Eigenen Webfont einrichten (nicht als Hauptschriftart)

Shopware 5 Themes & Design
1

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?

2

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;
        }

 

3

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