Webfont einbinden

Shopware 5 Themes & Design
1

Hallo Shopware Community,

ich habe eine Webfont bei MyFonts gekauft und würde diese gerne in unser Theme einbinden um sie in „Digital Publishing“ zu verwenden. Den Ordner „webfonts“ von myfonts habe ich bereits in frontend/_public/src/fonts gelegt. Leider habe ich nach langer Suche kein richtiges Tutorial (auch hier im Forum) gefunden wie die nächsten Schritte aussehen. Kann mir jemand dabei helfen bzw. gibt es dafür bereits eine Anleitung dazu? Vielen Dank!

 

2

Hallo,

du musst in deinem Theme unter frontend/_public/src/less/ die Datei all.less erstellen und folgenden Code einfügen:

@import "_components/fonts";

Dann musst du unter frontend/_public/src/less/_components die Datei fonts.less erstellen und über @font-face deine Schrift einbinden.

Hier ein Beispiel aus dem Responsive-Theme:

@OpenSansPath: "./fonts";

/* BEGIN Light */
@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: local('Open Sans Light'),
    local('OpenSans-Light'),
    url('@{OpenSansPath}/Light/OpenSans-Light.woff2?@{shopware-revision}') format('woff2'),
    url('@{OpenSansPath}/Light/OpenSans-Light.woff?@{shopware-revision}') format('woff'),
    url('@{OpenSansPath}/Light/OpenSans-Light.ttf?@{shopware-revision}') format('truetype');
    font-weight: 300;
    font-style: normal;
}
/* END Light */

/* BEGIN Regular */
@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: local('Open Sans Regular'),
    local('Open Sans'),
    url('@{OpenSansPath}/Regular/OpenSans-Regular.woff2?@{shopware-revision}') format('woff2'),
    url('@{OpenSansPath}/Regular/OpenSans-Regular.woff?@{shopware-revision}') format('woff'),
    url('@{OpenSansPath}/Regular/OpenSans-Regular.ttf?@{shopware-revision}') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* END Regular */

/* BEGIN Semibold */
@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: local('Open Sans Semibold'),
    local('OpenSans-SemiBold'),
    url('@{OpenSansPath}/Semibold/OpenSans-Semibold.woff2?@{shopware-revision}') format('woff2'),
    url('@{OpenSansPath}/Semibold/OpenSans-Semibold.woff?@{shopware-revision}') format('woff'),
    url('@{OpenSansPath}/Semibold/OpenSans-Semibold.ttf?@{shopware-revision}') format('truetype');
    font-weight: 600;
    font-style: normal;
}
/* END Semibold */

/* BEGIN Bold */
@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: local('Open Sans Bold'),
    local('OpenSans-Bold'),
    url('@{OpenSansPath}/Bold/OpenSans-Bold.woff2?@{shopware-revision}') format('woff2'),
    url('@{OpenSansPath}/Bold/OpenSans-Bold.woff?@{shopware-revision}') format('woff'),
    url('@{OpenSansPath}/Bold/OpenSans-Bold.ttf?@{shopware-revision}') format('truetype');
    font-weight: bold;
    font-style: normal;
}
/* END Bold */

/* BEGIN Extrabold */
@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: local('Open Sans ExtraBold'),
    local('OpenSans-ExtraBold'),
    url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.woff2?@{shopware-revision}') format('woff2'),
    url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.woff?@{shopware-revision}') format('woff'),
    url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.ttf?@{shopware-revision}') format('truetype');
    font-weight: 800;
    font-style: normal;
}
/* END Extrabold */

Viele Grüße

1 „Gefällt mir“