Fonts wird lange nach anderem Content angezeigt

Helau,

in meinem www.matchashop.de habe ich den Google Font "Maven Pro" so eingebunden:

Google Webfonts-URL: "https://fonts.googleapis.com/css?family=Maven+Pro"
Schriftart: 'Maven Pro', Arial, sans-serif

Bei jedem Aufruf einer Seite wird nun aber erst sämtlicher anderer Content wie Bilder, Rahmen etc geladen, bevor dann mal irgendwann die Schrift angezeigt wird.

Blöd. Was könnte ich tun, damit die Schriftart schneller oder als erstes auf einer Seite geladen wird?

Danke schonmal vorab für jegliche Tipps.

 

@FlorianR Schaue mal hier https://developers.google.com/web/u...ay?utm_source=lighthouse&utm_medium=extension

 

Interessanter Artikel, vielen Dank.

Habe das jetzt mal so umgesetzt:

Ins eigene CSS das reingeschrieben:

Code:

@font-face {
  font-family: 'Maven Pro';
  font-display: auto;
  src: local('Maven Pro'), url(https://matchashop.de/images/font/maven_pro_regular-webfont.woff) format('woff');
}

(Die Schriftart liegt natürlich auch in dem Pfad)

Im SE steht nun das drin:



Jetzt wird mir aber nur noch ARIAL standardmäßig angezeigt und es dauert trotzdem noch 2 Sekunden, bis die Schrift angezeigt wird.

Cache sind alle geleert, auch manuell per FTP und auch der Templates- und der Browsercache.

 

Wäre vielleicht ein Versuch wert:
In den <head> (.../module/head.html) folgende Zeile einfügen:

Code:

<link rel="preload" href="/imges/font...." as="font" />

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

 

Gemacht, bringt leider nix :-(

 

Das funktioniert praktisch nicht. Vielleicht 2021.

Den Webfont Pfad im SE leermachen ist Quatsch. Daraus zieht niemand irgendeinen Vorteil, die Font Datei kommt immer lokal aus dem Shop und ein früherer include im CSS ist quasi nicht möglich.

Im Moment kann man da allgemein nichts sehen, weil die Fonteinbindung jetzt gerade reichlich kaputt ist, die funktioniert gerade gar nicht.

 

OK, dann Kommando zurück.

Hab das aus #4, aus der head.html wieder rausgelöscht, hab den eigenen CSS Code aus #3 wieder rausgenommen und im SE steht nun wieder:

Code:

Google Webfonts-URL: "https://fonts.googleapis.com/css?family=Maven+Pro"
Schriftart: 'Maven Pro', Arial, sans-serif

Cache sind alle geleert, auch manuell per FTP und auch der Templates- und der Browsercache.

Sollte ich jetzt ein Ticket eröffnen, da die Schrift immer noch sehr lange braucht zum laden?

 

Ist immernoch redlich kaputt: