Webfont: Falsche Darstellung der Schriftstärke in Chrome

[[Mitglied tobi…]]

Hallo zusammen,

 

ich habe ein sehr merkwürdiges Problem, für das ich einfach keine Lösung finden will. Eine statische (Landing-)Page soll mit einem Webfont versehen werden, der lokal eingebunden wird (Dateien auf dem Server, @font-face) und in zwei Varianten vorliegt - regular und medium.

Da für beide Schriftstärken separate Fonts vorliegen, habe ich darauf geachtet, dass bei der Einbindung via @font-face in beiden Fällen " font-weight: normal; font-style: normal;" definiert wurde, ebenso bei der Definition der beiden Klassen in CSS.

 

Damit soll bspw. faux bold etc. vermieden werden, siehe https://www.smashingmagazine.com/2012/07/avoiding-faux-weights-styles-google-web-fonts/ 

 

Das funktioniert auch grundsätzlich, in Firefox und Safari wird die Medium-Variante (erster Satz) korrekt dargestellt, in Chrome hingegen ignoriert: 

 

Wenn ich bspw. mit der Chrome-Erweiterung WhatFont prüfe, wird hier auch die Medium-Variante der Schrift erkannt im ersten Satz, nur ist das eben nicht sichtbar...

Wenn ich nun versuchsweise via CSS "font-weight: bold" setze, ist das Ergebnis natürlich in sämtlichen Browsern nicht mehr korrekt, da "künstlich" verfettet wird. 

Hat jemand ähnliche Erfahrungen gemacht oder eine Idee, woran dies liegen könnte?

 

 

edit:

Anfangs hatte ich das Problem, dass alle Browser die Schriften unsauber darstellten, das lag an der Verwendung von vw-Angaben für font-size. Testweise ist dies nun auf px umgestellt, das Ergebnis (FF/Safari korrekt, Chrome falsch) ist das hier präsentierte.

bearbeitet März 16, 2018 von tobinsky
Nachtrag

[Ralf Herrmann]

Ich weiß nicht, ob du dich wirklich an einen nach Webmaßstäben völlig veralteten Artikel von 2012 halten willst, der über IE 7 und 8 spricht. 

[[Mitglied tobi…]]

Ich will mich nicht strikt nach diesem Artikel richten, nur ist das Problem ja noch immer aktuell, oder etwa nicht?

Denn sobald ich mit font-weight: medium experimentiere, wird eben künstlich verfettet anstatt die korrekte medium-Schrift zu verwenden. Zumindest Firefox und Safari scheinen diesen Ansatz zu bestätigen. Sollte ich mich da aber auf dem Holzweg befinden, bin ich für Aufklärung äußerst dankbar!

[Ralf Herrmann]

Wenn es definitiv bei zwei Strichstärken bleibt, sprich sie als normal und bold an und es gibt in keinem aktuellen Browser Probleme. Diese Unterscheidung ist ja der kleinste gemeinsame Nenner, den es seit den 1990ern gibt. 

[[Mitglied tobi…]]

Das war mein erster Gedanke, allerdings funktioniert das leider nicht: 

Die einzige korrekte Anzeige (in FF & Safari) findet sich rechts oben, die Medium-Schrift wird eingebunden mit font-weight: normal, da ja diese Schriftvariante schon etwas dicker ist als die Regular-Version. Die Bold-Einbindung rechts unten ist schlicht fetter als die NeusaNextStd-CondensedMedium.

[Ralf Herrmann]

Die CSS-Klassen zu sehen zeigt mir nichts. Wichtig ist, dass die beiden Schnitte zu einer @font-face-Familie zusammengefügt werden. 

[[Mitglied tobi…]]

Ich habe die in zwei Familien definiert:

 

@font-face {font-family: 'NeusaNextStd-CondensedMedium';src: url('webfonts/NeusaNextStd-CondensedMedium.eot');src: url('webfonts/NeusaNextStd-CondensedMedium.eot?#iefix') format('embedded-opentype'),url('webfonts/NeusaNextStd-CondensedMedium.woff2') format('woff2'),url('webfonts/NeusaNextStd-CondensedMedium.woff') format('woff'),url('webfonts/NeusaNextStd-CondensedMedium.ttf') format('truetype'); font-weight: normal; font-style: normal;}
   
@font-face {font-family: 'NeusaNextStd-CondensedRegular';src: url('webfonts/NeusaNextStd-CondensedRegular.eot');src: url('webfonts/NeusaNextStd-CondensedRegular.eot?#iefix') format('embedded-opentype'),url('webfonts/NeusaNextStd-CondensedRegular.woff2') format('woff2'),url('webfonts/NeusaNextStd-CondensedRegular.woff') format('woff'),url('webfonts/NeusaNextStd-CondensedRegular.ttf') format('truetype'); font-weight: normal; font-style: normal;}
 

Liegt hier mein Denkfehler? Allerdings scheint es ja grundsätzlich bzw. in manchen Browsern zu funktionieren...

[Ralf Herrmann]

vor 14 Minuten schrieb tobinsky:

Liegt hier mein Denkfehler? 

Ja. Es muss eine Familie sein, damit Familienzugehörigkeiten überhaupt einen Sinn ergeben. Wenn es dann eine Familie ist, ist wie gesagt die Zuweisung normal + bold die sicherste. 

[[Mitglied tobi…]]

Au Mann, das ist ja fast schon peinlich...

 

Vielen herzlichen Dank!

[[Mitglied Erik…]]

Hallo Leute,

 

ich habe dasselbe Problem, wenn ich html schreibe <strong class "N" > und in CSS .N : font-weight: normal, dann funktioniert das in Firefox, aber nicht in Chrome. Das Problem existiert aber nur, wenn ich es im online-editor von one.com schreibe. Im offline editor bracket funktioniert es auch in chrome. Gibt es da irgendeine Lösung? Meine Internetadress ist erikarojas.de