Hallo,
wir befinden uns gerade im Aufbau eines Onlineshops mit Shopware (aktuelle Version 5.4.5).
Für die Schriftarten verwenden wir Webfonts von Adobe Typekit.
Auf Mac, OS und Android geräten funktioniert es auch Problemlos.
Auf Windows-PCs hingegen wird die Schrift verpixelt/unscharf dargestellt.
Hier zwei Beispiele, eins für die durch Adobe gehostete Webfont und eins für die eigens gehostete Webfont
Beispiel Typekit Webfont
Beispiel eigene Webfont
Wir haben die Schrift auf zwei verscheidene Arten eingebunden, das Problem besteht bei beiden Lösungsansätzen:
1) Per @import
In der all.less von unserem Template wurde die Schrift per @Import eingebunden und anschließend in der Theme-Konfiguration im Backend bei @font-base-stack die Schrift aufgeführt.
Für die Webfont von Adobe Typekit:
@import url("https://use.typekit.net/xxxxxx.css");"
bzw. für die eigene Webfont:
@font-face {
font-family: 'Sansumi-Bold';
src: url('../fonts/Sansumi-Bold.eot');
src: url('../fonts/Sansumi-Bold.svg#Sansumi-Bold') format('svg'),
url('../fonts/Sansumi-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Sansumi-Bold.woff2') format('woff2'),
url('../fonts/Sansumi-Bold.woff') format('woff'),
url('../fonts/Sansumi-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
2) Typekit per JavaScript in der Theme Konfiguration
(function(d) {
var config = {
kitId: 'xxxxxx',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
Bei beiden Varianten wird die Schrift auf Windows-PCs unscharf angezeigt. Getestet haben wir das ganze auf verschiedenen Computern. An der Bildschirmauflösung o.ä. kann es also eigentlich nicht liegen.
Bei Google & co. haben wir leider keine Antworten gefunden die geholfen haben.
Lediglich das es sich um ein rendering Problem von Windows handeln könnte und “font-smoothing” verwendet werden sollte:
body {
/* Smoothing */
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
Das hat aber leider auch nicht geholfen.
Da andere Internetseiten aber normal dargestellt werden können wir uns nur schwer vorstellen das es an dem Betriebssystem liegt.
Was machen wir hier falsch? Vielleicht habt ihr ja ähnliche Erfahrungen gemacht und kennt eine Lösung. (P.S. stattdessen eine Systemschrift zu verwenden kann nicht die Lösung sein. Bei anderen Websiten funktioniert es ja auch)