Hallo Typografen,

 

ich schlage mich mit einem merkwürdigen Webfont-Problem rum,  bei dem ich einfach nicht weiterkomme:
 

Im CSS einer Webapp ist per @font-face eine font-family (4 Schnitte jeweils als eot, woff, woff2 und ttf)  eingebunden. Die Font-Dateien liegen lokal auf dem Webserver 1 der App (Linux-VM/Apache/Plesk von HostEurope).  Sowohl in Chrome als auch in Firefox (Win10) rendert die Schrift unsauber:

Die exakt gleichen Font-Dateien liegen noch auf einem anderen Webserver 2, auf den ich keinen administrativen Zugriff habe.

Wenn ich nun für o.g. Webapp in der font-face-Deklaration ausschließlich die Pfade zu den Font-Dateien anpasse, so dass diese von Webserver 2 statt von lokal geladen werden, rendert die Schrift deutlich sauberer bzw. bekommt eine Art Anti-Aliasing:

Im Webinspector von Chrome sieht man, dass er in beiden Fällen die gleichen woff2-Dateien lädt. Eine andere woff2 (fontawsome v4.7.0), die ebenfalls lokal auf Webserver 1 liegt, rendert grundsätzlich immer picobello.

 

Nach meiner Logik kann der Unterschied nur durch verschiedene Einstellungen der Webserver verursacht werden.

Hat jemand eine Idee oder kennt sogar die Lösung?

 

 

PS

Auf  Tablet und Smartphone gibt es übrigens keinen Unterschied - da rendert die Schrift in beiden Fällen identisch und absolut crisp.

Ich kann die Gegenüberstellung »unsauber–Antialiasing« nicht erkennen. Beide Darstellungen sind nahezu identisch.

Ich sehe hier schon unterschiedliche Darstellungen, links Webserver 1.

 

 

 

Hier noch ein Beispiel - rechts Wbsrv1:

Edit:

Auffällig wirds beim großen S, G, C, D und vor allem E.

Um die Kernfrage zu beantworten: Nein, mir ist nicht bekannt, wie irgendwelche Webserver-Einstellungen die Fontdarstellung beeinflussen sollten. Ein Webfont wird heruntergeladen und lokal zur Anzeige benutzt, als wäre er lokal installiert. Bei diesem Schritt ist es also komplett unerheblich wo der Font ursprünglich herkam. Ich würde nach anderen möglichen Fehlerursachen suchen. (unterschiedliche Fonts/Formate/Fallback-Fonts). 

Wie gesagt:

Die Fonts sind identisch, das Verzeichnis wurde von Webserver 2 auf Webserver 1 kopiert. Die Deklarationen sind - abgesehen von den Pfaden zu den Font-Dateien - ebenfalls identisch und im gleichen CSS hinterlegt. Für die Beispiel-Screens kommentiere ich lediglich mal den einen und mal den anderen Block aus:

/*@font-face{
  font-family:DIN;
  src:url('../../uploads/fonts/DIN/ad9e233d-5ad0-4ac3-be71-ade974eb568e.eot?#iefix');
  src:url('../../uploads/fonts/DIN/ad9e233d-5ad0-4ac3-be71-ade974eb568e.eot?#iefix') format('eot'),
  url('../../uploads/fonts/DIN/337abafb-a752-4078-80c7-4e0973d02639.woff2') format("woff2"),
  url('../../uploads/fonts/DIN/f07e9c31-318c-4cd8-b379-44ad4b70733a.woff') format('woff'),
  url('../../uploads/fonts/DIN/70da379f-c570-41d5-994e-7e57af0d609b.ttf') format('truetype');
  font-weight:200;
  font-style:normal }
@font-face{
  font-family:DIN;
  src:url('../../uploads/fonts/DIN/ef2b52b9-4262-4fbb-b441-cb2252c430e8.eot?#iefix');
  src:url('../../uploads/fonts/DIN/ef2b52b9-4262-4fbb-b441-cb2252c430e8.eot?#iefix') format('eot'),
  url('../../uploads/fonts/DIN/8af14602-a05c-4855-b6ae-5f65dff396d7.woff2') format("woff2"),
  url('../../uploads/fonts/DIN/992de224-96ef-4636-b4df-a41cdf9df804.woff') format('woff'),
  url('../../uploads/fonts/DIN/3935fe06-c2de-499b-aa2b-4c4eec9ef861.ttf') format('truetype');
  font-weight:400;
  font-style:normal }
@font-face{
  font-family:DIN;
  src:url('../../uploads/fonts/DIN/2cc1a189-78ab-4426-9820-f12e6c6b3471.eot?#iefix');
  src:url('../../uploads/fonts/DIN/2cc1a189-78ab-4426-9820-f12e6c6b3471.eot?#iefix') format('eot'),
  url('../../uploads/fonts/DIN/798e4df5-1452-4afb-80af-4dfadf543003.woff2') format("woff2"),
  url('../../uploads/fonts/DIN/2f94f3ce-1c6c-4817-8ea8-dff50be5b6f7.woff') format('woff'),
  url('../../uploads/fonts/DIN/a969a25f-5b63-4797-81c8-d47df5d6a0e2.ttf') format('truetype');
  font-weight:700;
  font-style:normal }
@font-face{
  font-family:DIN;
  src:url('../../uploads/fonts/DIN/ab2e868d-9f26-41bb-96d6-b5a3699002f6.eot?#iefix');
  src:url('../../uploads/fonts/DIN/ab2e868d-9f26-41bb-96d6-b5a3699002f6.eot?#iefix') format('eot'),
  url('../../uploads/fonts/DIN/6fa7f26f-5f7a-42f6-964f-e0bae7c4f15c.woff2') format("woff2"),
  url('../../uploads/fonts/DIN/39092f28-85fb-41a4-a859-2b251a0e412d.woff') format('woff'),
  url('../../uploads/fonts/DIN/f54ec26d-c0e7-421b-86d9-67cb53a5e291.ttf') format('truetype');
  font-weight:900;
  font-style:normal } */

@font-face {
    font-family:DIN;
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/ad9e233d-5ad0-4ac3-be71-ade974eb568e.eot?#iefix');
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/ad9e233d-5ad0-4ac3-be71-ade974eb568e.eot?#iefix') format('eot'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/337abafb-a752-4078-80c7-4e0973d02639.woff2') format("woff2"),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/f07e9c31-318c-4cd8-b379-44ad4b70733a.woff') format('woff'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/70da379f-c570-41d5-994e-7e57af0d609b.ttf') format('truetype');
    font-weight: 200;
    font-style: normal }
@font-face {
    font-family:DIN;
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/ef2b52b9-4262-4fbb-b441-cb2252c430e8.eot?#iefix');
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/ef2b52b9-4262-4fbb-b441-cb2252c430e8.eot?#iefix') format('eot'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/8af14602-a05c-4855-b6ae-5f65dff396d7.woff2') format("woff2"),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/992de224-96ef-4636-b4df-a41cdf9df804.woff') format('woff'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/3935fe06-c2de-499b-aa2b-4c4eec9ef861.ttf') format('truetype');
    font-weight: 400;
    font-style: normal }
@font-face {
    font-family:DIN;
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/2cc1a189-78ab-4426-9820-f12e6c6b3471.eot?#iefix');
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/2cc1a189-78ab-4426-9820-f12e6c6b3471.eot?#iefix') format('eot'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/798e4df5-1452-4afb-80af-4dfadf543003.woff2') format("woff2"),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/2f94f3ce-1c6c-4817-8ea8-dff50be5b6f7.woff') format('woff'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/a969a25f-5b63-4797-81c8-d47df5d6a0e2.ttf') format('truetype');
    font-weight: 700;
    font-style: normal }
@font-face {
    font-family:DIN;
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/ab2e868d-9f26-41bb-96d6-b5a3699002f6.eot?#iefix');
    src: url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/ab2e868d-9f26-41bb-96d6-b5a3699002f6.eot?#iefix') format('eot'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/6fa7f26f-5f7a-42f6-964f-e0bae7c4f15c.woff2') format("woff2"),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/39092f28-85fb-41a4-a859-2b251a0e412d.woff') format('woff'),
    url('https://loremipsum.info/typo3conf/ext/DIN/Resources/Public/Fonts/f54ec26d-c0e7-421b-86d9-67cb53a5e291.ttf') format('truetype');
    font-weight: 900;
    font-style: normal }

 

vor 1 Minute schrieb semilla:

Wie gesagt:

Die Fonts sind identisch …

Sagst du, aber es ist für uns unmöglich zu überprüfen, ob die identischen Fonts tatsächlich zur Anwendung kamen als die Screenshots gemacht wurden. 

Ich kann das problemos überprüfen und sicherstellen:

 

Wbsrv1:

 

Wbsrv2:

Screenshots ändern nichts an meiner Aussage. 

Müssten dann nicht die angezeigten Größen auch identisch sein?

Die Dateigrößen sind identisch - die Transfergrößen unterscheiden sich allerdings. Hier liegt auch ein Lösungsansatz, den ich bereits erfolglos verfolgt habe: woff2 ist gzip-komprimiert, was bei der Auslieferung vom Webserver berücksichtigt werden muss...

Solche Sachen sind meist Cache- und Font-Stack-Probleme. Ändere erstmal die @font-family-Einträge zu irgendwas wirklich eindeutigem, also definitiv keiner Schrift, die du lokal installiert hast. Und dann natürlich noch für jeden Server verschiedene Werte.

(edit: sorry, da hab ich was altes ausgegraben ...)

 

hätte jetzt auch vermutet dass mögleicherweise ein lokaler Font oder ein gecachter Font (client- oder serverseitig) sich dazwischenstellt ...

ein gzip / deflate / ... das bei der Auslieferung zum Einsatz kommt oder eben nicht, darf ja an den Daten nichts verändern.

 

Wenn die beiden Dateien am Server tatsächlich identisch sind und auch wirklich diese ausgeliefert werden (kein Servercache), und keine lokale Datei oder ein lokaler Cache im Fontstack Vorrang hat (selber Fontname, andere Daten), die Hardware die selbe ist und im selben Modus läuft (Batterie / Netzstrom, ... da könnten dann Treiber oder Stromsparfunktionen eventuell was optimieren), sollte auch die selbe Darstellung erfolgen.

 

Mir ist auch kein Apache-Modul bekannt, das mit Fonts speziell irgendwas machen sollte (außer halt serverseitiges Rendering, aber das ist hier ja nicht im Spiel).