Schriftart lädt im Safari extrem langsam

Shopware 6 (German)
1

Hallo community!

Wir haben ein Problem mit unserer Schriftart, was allerdings nur bei Safari auftritt. Wir konnten eine Schriftart lokal hochladen und erfolgreich einbinden (ArtegraSansAlt)

Nun ist es leider so, dass die Schriftart in Safari extrem lange lädt, sodass die Website teilweise 5-10 Sekunden gänzlich ohne Schrift angezeigt wird und hin und her springt. Das betrifft sowohl den Desktop als auch die mobile Version. Seltsam ist, dass das Problem in keinem anderen Browser auftritt.

Hier könnt ihr die Seite mal testen.

Hat jemand eine Idee woran das liegen kann?

Wir nutzen Shopware 6, self-hosted und die Schrift habe ich über das TC Customizing Plugin unseres Themeware Themes mit Hilfe dieser Anleitung eingebunden.

Beste Grüße aus dem heißen und viel zu trockenen Süden,

Eik

2

Bildschirmfoto 2022-08-01 um 16.02.45
Bildschirmfoto 2022-08-01 um 16.02.451392×889 223 KB

Ich habe da so eine Idee.

Sieht nicht wirklich so aus, als ob es korrekt eingebunden wäre…

3

Die Schriftart wird nicht gefunden, es gibt aber auch noch weitere Stellen an denen die Ladezeiten hoch sind.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fiuvascare.de%2F&form_factor=mobile

4

Das sieht ja wirklich nicht gut aus. Dann würde ich das ganze noch einmal probieren, falls du keine bessere Lösung hast.

Komisch ist nur, dass die Schriftart ja im Browser angezeigt wird. Und da es keine google font ist, müssen die Rechner die Schrift ja irgendwoher laden.

5

Danke euch beiden für die Antworten! Ich werde mich mal an die Bilder machen. Die hatte ein Kollege integriert und dabei wohl nicht auf die Komprimierung geachtet. Damit sollte sich ja zumindest die Ladezeit schon etwas verbessern. Und mit der Schrift hoffe ich, dass es durch den neuen Einbindungsversuch via FTP klappt. Wir hatten ein rebranding und haben dabei auch unsere URL geändert. Die Schriftart hatte ich schon davor eingebunden - vielleicht hat sich durch das rebranding und den neuen Verkaufskanal etwas in der FTP Ordnerstruktur verändert, weshalb die font jetzt nicht mehr korrekt geladen bzw gar nicht erst gefunden wird.

6

Offensichtlich findet er die URL nicht. Ich habe gerade mal in meine base.scss Datei geguckt und tatsächlich ist dort mMn keine URL angegeben, von der die Schrift geladen werden soll. Mein Problem ist, dass ich nicht weiß, wo ich die benötigten CSS-Anweisungen der Fonts herbekomme.

In der oben verlinkten Anleitung steht nur folgendes:

  1. Öffne die Datei „base.scss“ (ehemals „main.scss“; ab Shopware 6.4 muss die Datei „base.scss“ heißen).
    Ordnerpfad: „custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/“
  2. Hinterlege in der „base.scss“ durch kopieren und einfügen die CSS-Anweisungen der Fonts aus Abschnitt „3. Copy CSS“. Weitere Schriftarten können einfach unterhalb der zuvor eingebunden CSS-Codes ergänzt.

Kann mir jemand sagen, wie ich die URL im CSS angeben kann oder woher ich die benötigten CSS-Anweisungen für ArtegraSansAlt bekomme?

Ich stehe da als Laie etwas auf dem Schlauch.

Viele Grüße und hoffentlich mal etwas Regen :smiley:

7

Du kannst hier nachlesen, wie du dir das CSS selbst baust: Web fonts - Learn web development | MDN

8

Danke für den Link. Das sieht nach einem Studium aus. Oder meinst du, dass man das selbst als Laie zeitnah umsetzen kann?

Währenddessen bin ich auf eine andere Lösung gestoßen, in der mittels „swap“ im @font-face eine Standardschriftart geladen wird, bis die gewünschte Font fertig geladen ist. Das wäre allerdings nur ein workaround und würde das eigentliche Problem mit der falschen URL nicht wirklich lösen.

Trotzdem wollte ich mal schauen ob es klappt aber ich vermute, dass ich den swap Befehl irgendwie falsch eingebunden habe. Ich habe ihn einfach an das Ende der verschiedenen font-faces eingefügt. Sollte das nicht eigentlich so funktionieren? Mich nervt es immer, wenn ich eine Anleitung befolge um etwas am code zu ändern, es dann aber keinerlei Wirkung zeigt. Dieses mal habe ich wahrscheinlich auch eine Kleinigkeit falsch gemacht und schon funktioniert die ganze Geschichte nicht mehr. Kann mir jemand sagen woran das liegt?

@import url("//hello.myfonts.net/count/374540");

  
@font-face {font-family: 'ArtegraSansAlt-Black';src: url('webfonts/374540_0_0.eot');src: url('webfonts/374540_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/374540_0_0.woff2') format('woff2'),url('webfonts/374540_0_0.woff') format('woff'),url('webfonts/374540_0_0.ttf') format('truetype');font-display: swap;}
 
  
@font-face {font-family: 'ArtegraSansAlt-Bold';src: url('webfonts/374540_1_0.eot');src: url('webfonts/374540_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/374540_1_0.woff2') format('woff2'),url('webfonts/374540_1_0.woff') format('woff'),url('webfonts/374540_1_0.ttf') format('truetype');font-display: swap;}
 
  
@font-face {font-family: 'ArtegraSansAlt-ExtraLight';src: url('webfonts/374540_2_0.eot');src: url('webfonts/374540_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/374540_2_0.woff2') format('woff2'),url('webfonts/374540_2_0.woff') format('woff'),url('webfonts/374540_2_0.ttf') format('truetype');font-display: swap;}
 
  
@font-face {font-family: 'ArtegraSansAlt-Medium';src: url('webfonts/374540_3_0.eot');src: url('webfonts/374540_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/374540_3_0.woff2') format('woff2'),url('webfonts/374540_3_0.woff') format('woff'),url('webfonts/374540_3_0.ttf') format('truetype');font-display: swap;}
 
  
@font-face {font-family: 'ArtegraSansAlt-Regular';src: url('webfonts/374540_4_0.eot');src: url('webfonts/374540_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/374540_4_0.woff2') format('woff2'),url('webfonts/374540_4_0.woff') format('woff'),url('webfonts/374540_4_0.ttf') format('truetype');font-display: swap;}
 
  
@font-face {font-family: 'ArtegraSansAlt-SemiBold';src: url('webfonts/374540_5_0.eot');src: url('webfonts/374540_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/374540_5_0.woff2') format('woff2'),url('webfonts/374540_5_0.woff') format('woff'),url('webfonts/374540_5_0.ttf') format('truetype');font-display: swap;}
 
/*
.is-ctl-product {
	.product-detail-name {
		background-color: $twt-color-brand-primary-light;
		border: 1px solid $twt-color-brand-primary-dark;
		padding: 10px;
		color: #FF0004;
	}
}
*/
9

Was ich eben so sehe, glaube das fehlt noch die Angabe von font-weight. Black, Bold, Medium etc… müssen zugeordnet werden. Zum Testen hätte ich die Zeilen auch etwas geküzt und mich nur auf die Formate „woff“ und „truetype“ ohne „iefix“ konzentriert.

10

Was ich generell nicht verstehe ist, weshalb die Schriftart im Browser erkannt und bei "RMK–> untersuchen " auch angezeigt wird, obwohl sie offensichtlich nicht geladen werden kann.

11

Die Schriftart ist auf dem PC installiert oder liegt von einer anderen Website im Browsercache.

12

Danke! Das ergibt Sinn. Dann hab ich das schonmal verstanden.

Kannst du mir vielleicht noch sagen, wie ich eine lokale FTP URL in die base.scss Datei einfüge damit das klappt? Der Support von TC Innovations verweist leider nur auf Anleitungen, die diese Schritte nur für google Fonts klären.

13

Die Anleitung ist nicht unbedingt empfehlenswert. Dort steht man soll das in der main.css rein schreiben. Die main.css wird jedoch generiert und bei jedem Kompilieren des Themes überschrieben.

Ohne ein Plugin braucht man auch hier ein paar Grundkenntnisse zum Anpassen eines Templates. Dazu empfehle ich dieses Plugin: Custom Template Manager | Shopware Store (Der Anleitung von ThemeVVare kann man bis zum FTP Upload folgen, die Einbindung macht man aber direkt im Template)

Und wenn man gar keine Erfahrung hat, gibt es in diesem Plugin ein Feature zum Einbinden von Fonts (Wenn das gewünschte Paket nicht vorhanden ist, einfach den Entwickler anschreiben, der kümmert sich darum)

1 „Gefällt mir“
14

Vielen Dank dir!

Ich werde mal versuchen welcher Weg für mich am besten ist. :+1:

15

Bei der Themware Anleitung steht ziemlich am Anfang „Gebe als Ordner-Präfix „/bundles/tcinncustomizing/fonts/“ (ohne Anführungszeichen) an.“ → Kann ich das erstmal ignorieren? Ich denke das ist relativ wichtig, damit das Theme Später auch im richtigen Ordner nach der Font sucht, oder?

Unsere Font ist aber leider keine google font, weshalb ich den Dienst Herokuapp nicht nutzen und somit auch kein Ordner-Präfix angeben kann.

Ich hangel mich jetzt Schritt für Schritt durch die Anleitung durch und versuche es dann nach dem FTP Upload mit dem Custom Template Manager Plugin zu vollenden.

16

So wie ich es jetzt sehen kann, habe ich keine Fehlermeldungen zur font mehr in der Browserkonsole.

Heißt das, dass ichs tatsächlich hinbekommen habe oder lädt mein browser die Daten irgendwie doch lokal von meinem Rechner?

Ich habe jetzt das angegebene Ordner-Präfix in die base.scss Datei an die Stellen eingefügt, an denen es automatisch von Herokuapp hinzugefügt wurde.

Die Ladeverzögerung in Safari ist komplett weg. Allerdings ist die google page speed insights score für mobil von 33 auf 30 punkte und Desktop von 94 auf 73 Punkte abgeschmiert. Eigentlich müsste die jetzt doch besser sein. Hat jemand dafür eine Erklärung?

Vielen Dank noch einmal für die Hilfe hier!