Jump to content
Postkarten-ABC zum Sammeln oder Verschenken …

Webfonts rendern serverabhängig unsauber

Empfohlene Beiträge

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:2020_02.05_21h14m05s_16.png.ac048f03473a137ede2814f60dbea140.png

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:2020_02.05_21h14m23s_17.png.516747d9ca85eff3ecef482913f13fcb.png

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.

Link zu diesem Kommentar

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). 

Link zu diesem Kommentar

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 }

 

Link zu diesem Kommentar

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...

2020_02.06_08h48m39s_22.png.da70e68b0c884ccfc6aa11f5b2485fab.png2020_02.06_08h50m16s_23.png.8e2b90db59f81fd57243fce30ea2378f.png

Link zu diesem Kommentar

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.

  • Gefällt 1
Link zu diesem Kommentar
  • 11 Monate später...

(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).

Link zu diesem Kommentar

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden
Eine neues Portal, das die Schriftmuster der Welt sammelt und in einer Datenbank verfügbar macht.
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.