Jump to content
Typografie.info
Graublau Sans Pro von Georg Seifert — ein MyFonts-Bestseller
Graublau Sans Pro von Georg Seifert — ein MyFonts-Bestseller
Graublau Sans Pro von Georg Seifert — ein MyFonts-Bestseller
Graublau Sans Pro von Georg Seifert — ein MyFonts-Bestseller
Graublau Sans Pro von Georg Seifert — ein MyFonts-Bestseller
Graublau Sans Pro von Georg Seifert — ein MyFonts-Bestseller
Melde dich an, um diesem Inhalt zu folgen  
Gast

Webfonts rendern serverabhängig unsauber

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.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Ralf Herrmann

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

Bildschirmfoto 2020-02-06 um 05.44.10.png

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
bertel

Ich sehe hier schon unterschiedliche Darstellungen, links Webserver 1.

 

bildschirmfoto2020-02dkkzk.png

 

 

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Gast

Hier noch ein Beispiel - rechts Wbsrv1:

2020_02.06_08h02m24s_19.thumb.png.99381bb3efd683647a7662c6f786878a.png

Edit:

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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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). 

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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 }

 

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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. 

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Gast

Ich kann das problemos überprüfen und sicherstellen:

 

Wbsrv1:
2020_02.06_08h24m55s_21.png.57ca651c38f38cf121787d601e7631a0.png

 

Wbsrv2:

2020_02.06_08h23m27s_20.png.5eb4b545368579e2411b41fb271baec3.png

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Ralf Herrmann

Screenshots ändern nichts an meiner Aussage. 

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
bertel

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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Þ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.

  • Gefällt 1

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

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
Melde dich an, um diesem Inhalt zu folgen  

Canapé – die gemütliche Schriftfamilie von Sebastian Nagel
Canapé – die gemütliche Schriftfamilie von Sebastian Nagel
Canapé – die gemütliche Schriftfamilie von Sebastian Nagel
Canapé – die gemütliche Schriftfamilie von Sebastian Nagel
Canapé – die gemütliche Schriftfamilie von Sebastian Nagel
Canapé – die gemütliche Schriftfamilie von Sebastian Nagel
×
×
  • 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