Jump to content

Webfonts rendern serverabhängig unsauber


Gast

Empfohlene Beiträge

Gast

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 zum Beitrag
Ralf Herrmann

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 zum Beitrag
Gast

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 zum Beitrag
Ralf Herrmann
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. 

Link zum Beitrag
Gast

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 zum Beitrag
Þorsten

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.

Link zum Beitrag
  • 11 Monate später...
Sebastian Nagel

(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 zum Beitrag

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

<p>Wayfinding Sans Pro – die ultimative Beschilderungsschrift</p>
<p>Wayfinding Sans Pro – die ultimative Beschilderungsschrift</p>
<p>Wayfinding Sans Pro – die ultimative Beschilderungsschrift</p>
<p>Wayfinding Sans Pro – die ultimative Beschilderungsschrift</p>
<p>Wayfinding Sans Pro – die ultimative Beschilderungsschrift</p>
<p>Wayfinding Sans Pro – die ultimative Beschilderungsschrift</p>
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung