Standardfonts (Inter-Regular.woff2) entfernen

Shopware 6 (German) Themes & Design
1

Hallo,

wie man eigene Webfonts einbindet, habe ich verstanden (Shopware 6 | Insert your own font – The Cake Shop). Dennoch werden bei uns im eigenen Theme nach wie vor die Standard-Schriftarten von Shopware 6 mitgeladen, z. B. Inter-Regular.woff2. Die wird nicht benötigt - Wo kann ich das abstellen?

2

Fonts werden grundsätzlich mit “@font-face” in CSS Dateien initiiert, oder als PreLoad im Header, wobei zweiteres eher unwahrscheinlich ist.
Solltest du also ein Font nicht mehr laden wollen, dann entferne bitte das Fontface dieses Fonts aus der CSS Datei die sie initiiert. Das kannst du gut in Chrome unter den Dev-Tools herausfinden - also welche Datei es initiiert hat.
 

Mit einem Link zu deinem Shop könnte man dir natürlich besser und schneller weiter helfen.

3

Showpare 6 packt alles in die all.css - daher kann ich nicht wirklich erkennen, welche CSS-Datei den Font lädt - ist bei uns Zeile 14.000 :slight_smile:

 

font-face {
 font-family:"Inter";
 font-style:normal;
 font-weight:400;
 font-display:fallback;
 src:url("http://domain.de/public/bundles/storefront/assets/font/Inter-Regular.woff2") format("woff2"),
 url("http://domain.de/public/bundles/storefront/assets/font/Inter-Regular.woff") format("woff");
}
@font-face {
 font-family:"Inter";
 font-style:italic;
 font-weight:400;
 font-display:fallback;
 src:url("http://domain.de/public/bundles/storefront/assets/font/Inter-Italic.woff2") format("woff2"),
 url("http://domain.de/public/bundles/storefront/assets/font/Inter-Italic.woff") format("woff");
}
@font-face {
 font-family:"Inter";
 font-style:normal;
 font-weight:600;
 font-display:fallback;
 src:url("http://domain.de/public/bundles/storefront/assets/font/Inter-SemiBold.woff2") format("woff2"),
 url("http://domain.de/public/bundles/storefront/assets/font/Inter-SemiBold.woff") format("woff");
}
@font-face {
 font-family:"Inter";
 font-style:italic;
 font-weight:600;
 font-display:fallback;
 src:url("http://domain.de/public/bundles/storefront/assets/font/Inter-SemiBoldItalic.woff2") format("woff2"),
 url("http://domain.de/public/bundles/storefront/assets/font/Inter-SemiBoldItalic.woff") format("woff");
}
@font-face {
 font-family:"Inter";
 font-style:normal;
 font-weight:700;
 font-display:fallback;
 src:url("http://domain.de/public/bundles/storefront/assets/font/Inter-Bold.woff2") format("woff2"),
 url("http://domain.de/public/bundles/storefront/assets/font/Inter-Bold.woff") format("woff");
}
@font-face {
 font-family:"Inter";
 font-style:italic;
 font-weight:700;
 font-display:fallback;
 src:url("http://domain.de/public/bundles/storefront/assets/font/Inter-BoldItalic.woff2") format("woff2"),
 url("http://domain.de/public/bundles/storefront/assets/font/Inter-BoldItalic.woff") format("woff");
}

 

4

Habe es mit viel Sucherei gefunden. Falls es jemanden interessiert: vendor/shopware/storefront/Resources/app/storefront/src/scss/skin/shopware/_base.scss - dort die Zeile 13 auskommentieren. Ob das updatesicher ist? Spart auf jeden Fall Ladevolumen und Ladezeit. Keine Ahnung, wieso das überhaupt fest als Font eingebunden ist. Aber solche Fragen stellt man sich in SW6 an jeder Ecke…

5

Hallo,

Änderungen in den Dateien unter „vendor/shopware“ sind niemals updatesicher und werden bei jedem Shopware - Update automatisch wieder zurückgesetzt. Deshalb erstellt man für Änderungen immer ein eigenes Theme(-Plugin), damit die Änderungen updatesicher sind. Zu finden ist die Einbindung aber wie du bereits erwähnt hast hier: https://github.com/shopware/platform/blob/trunk/src/Storefront/Resources/app/storefront/src/scss/skin/shopware/_base.scss#L13 . Man könnte es also im Prinzip schon updatesicher lösen, indem man im eigenen Theme-(Plugin) die Storefront - Erbung bei „style“ entfernt ( https://docs.shopware.com/en/shopware-platform-dev-en/theme-guide/configuration#structure-of-the-theme-json ) - dann müsste man aber natürlich alle Dateien, die man dann weiterhin braucht, bei sich mit „verlinken“ (import).

Grüße

Sebastian

6

Guten Morgen @m23‍,

vielen Dank für deinen Lösungansatz. Das hilft wirklich weiter.
Nur das Problem mit der Updatesicherheit beschäftigt mich an dieser Stelle.

Vielleicht findet hier ja noch jemand anderes eine Updatesichere Lösung.

Gruß Daniel

7

If anyone else needs this:

Inter is a variable font and google fonts actually generates a single .woff2 file for it.
You can see it here (compare latin url for all weights)
https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap

Which means that you can just download that file from url path you see in google and import it as a custom font in your theme.

Just use the same url for all weights and you should be good. (re-adding same font will override default shopware’s font-face and you wont be downloading those Inter-Regular.woff2 etc anymore).

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("#{$assetPath}/font/Inter.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("#{$assetPath}/font/Inter.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("#{$assetPath}/font/Inter.woff2") format("woff2");
}
....
//repeat for each weight

WHY?

Shopware’s intermediary inter files take around 100kb each, so taken you use all 6 font-weights on a page this is extra 6 requests of total 600kb.

While single „rule them all“ woff2 file from google fonts is 37kb.

PS: subsets beyond latin will probably require other files as well.
Also this probably wont work with IE due to lack of variable fonts support.