Eigene Webfont in den Shopware-Shop einbinden - Fehleranalyse

Shopware 5 Themes & Design
1

Hallo zusammen,

nach etlichen Tutorials und Arbeitsstunden mit den lieben Kollegen, komme ich final nicht weiter. Ich hoffe sehr auf eure Unterstützung.

 

Was wurde bisher gemacht?

Alle relevanten Ordner und Less-Dateien wurden angelegt.

https://imgur.com/fuqadYF

Die fonts.less wird in die all.less importiert:

https://imgur.com/usFmQbx

Im Theme Manager wurde unter Typografie die neue Schriftart ausgewählt.

https://imgur.com/1E6nFFH

 

Für den Body wird in den Entwicklertools die neue Schrift bereits angezeigt,doch nirgends im Frontend. 

Die angezeigte Schrift ist jetzt jedoch tatsächlich Arial.

Was habe ich falsch gemacht? Die Schriftdatei ist hinterlegt, die Datei eingebunden, verknüpft und im Theme Manager ausgewählt.

Es wäre echt super, wenn sich jemand meiner Problematik annehmen würde.

 

 

2

Was sagt denn die Entwickler Console, die Datei wird geladen, aber nicht in den Artikeln angezeigt, wie sieht es mit dem Cache, Compiler, Source Map unter (Theme-Manager > jeweilige Theme > Einstellungen) aus ? hattest Du da was diesbezüglich angepast !?.

3

Hey,

danke für die schnelle Rückmeldung.

Die Entwickler-Console sagt:

body {

  1. font-size: 14px;
  2. font-size: .875rem;
  3. font-family: PorscheNext;
  4. font-weight: 500;
  5. color: #464646;
  6. background: #e9e9f0;
  7. text-rendering: optimizeLegibility;
  8. -webkit-font-smoothing: antialiased;

}

Cache wird nach jeder noch so kleinsten Änderung geleert und kompiliert. Die Einstellungen im Theme Manager sind angepasst, ja. (ist ja auch nur ein Eintrag, oder?)

Ein vielleicht noch sehr wichtiger Hinweis ist, dass die jetzt angezeigte Schriftart Arial ist… schaut zumindest so aus.

4

Wo liegt denn deine fonts.less Datei?

Denn du hast die Fonts ja wie es schein im /vendor Ordner.
Darüber hinaus fehlt auch der Pfad „PorscheNext“ bzw. eben der Ordner im Pfad.

Er lädt ganz einfach die Font nicht, weil er diese nicht finden kann. Was sagt die console oder ggf. der Network Tab? Da müsste eigentlich drin stehen, dass die Font nicht geladen wird.

Schau dir parallel dazu einfach mal das Responsive Theme an: Du hast sicherlich den eigentlich Pfad zum font directory in der typography.less vergessen -> https://github.com/shopware/shopware/blob/5.5/themes/Frontend/Responsive/frontend/_public/src/less/_variables/typography.less

5

Hi, 

danke sehr für den Tipp!

Network Tab gab aus, dass die Font nicht geladen wurde.

Ich habe tatsächlich die typography.less übersehen. 

Nachdem ich hier alles eingetragen hatte, klappt es nun.

THANKS!