Jump to content
Unsere freundliche Community freut sich auf deine Fragen …

Webfont erscheint im Firefox verfettet

Empfohlene Beiträge

grinsekatze

Hallo ihr Lieben,

 

ich brauche mal wieder eure fachmännische Hilfe…

Ich habe eben die Brandon Grotesque für meine Webseite gekauft und wenn ich den Webfont nun installiere, sieht er im Safari wunderschön aus… aber im Firefox fürchterlich.

 

Hier im Screenshot:

90ecd6dfaeab36av16clp3hno.png

Links Firefox, rechts Safari.

 

Wirkt irgendwie, als sei er künstlich verfettet oder als läge irgendeine Kontur drüber, oder so. Aber ich kann einfach nicht rausfinden, woran das liegen kann… und es macht mich ganz wahnsinnig :mad:

 

Hatte jemand von euch vielleicht schon mal das gleiche Problem und kann mir einen Rat geben?

 

Viele Grüße aus Mainz

Carmen

 

 

Link zu diesem Kommentar

Sofern die Einstellung für font-weight richtig gesetzt ist, ist das ein Fall von »isso«. 

Firefox und Safari haben unterschiedliche Render-Engines und stellen Text unterschiedlich dar. Damit muss man leben, wenn man nicht jedem Browser einen eigenen Schnitt ausliefern will. Solange man nicht beide Versionen nebeneinander hat, merkt man den Unterschied ja auch gar nicht. 

Link zu diesem Kommentar
Sebastian Nagel

Dazu müssten wir zwei Dinge wissen:

 

– Wie sieht deine CSS-Definition für diesen Stil aus, also zum einen die @font-face-Deklaration und das dafür definierte font-weight und der definierte font-style, zum anderen dann die (komplette) Formatierung des betroffenen Absatzes.

 

– wie sind die Webfonts aufgebaut, hier gibt es einerseits die Möglichkeit, dass die Strichstärken (weight) in den Font selbst richtig deklariert sind, dann hättest du z.B. eine font-family:"Droid Sans" mit dem font-weight:700; – oder aber eine font-family "Droid Sans Bold" mit dem font-weight:400;

 

 

Firefox verhält sich anders als Webkit-Browser, wenn so eine Verfettung "doppelt" angegeben wird ... er macht dann gerne "doppelt fett" draus, was zu sowas führen kann. Das selbe gibts auch für Kursiv und "doppelt kursiv".

D.h. es geht um eine möglichst korrekte Deklaration der Gewichte in den Fonts und im CSS, damit das nicht passiert.

 

Details hier: 

http://stackoverflow.com/questions/8942625/font-face-bold-in-ff-is-bolder-than-in-chrome

http://www.stormconsultancy.co.uk/blog/development/tips-tricks/dealing-with-firefox-rendering-fonts-too-bold-with-browser-specific-css/

 

 

und speziell hier: http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

 

3_unique_double-bold.png

(oben Webkit, unten Firefox)

Link zu diesem Kommentar
grinsekatze

Lieben Dank für eure Antworten!

 

Leider sagen die aber mir nichts Neues. Die CSS-Deklaration und Font-Einbindung ist einwandfrei und es gibt auch nichts, was die Eigenschaft fett vererbt oder überschreibt. Alles ist auf „normal“ gestellt. Habe da auch extra noch jemanden drübergucken lassen…

 

Ich muss wohl einfach damit leben, oder ich leiste mir doch noch den feineren Schnitt, damit ich endlich zufrieden bin ;)

 

Viele Grüße!

Link zu diesem Kommentar
R::bert

Habe eben mal fix die Forum-Webfonts (also FF Ernestine und FF Tisa) in beiden Browsern (Safari/Firefox – Mac) vergleichen. Interessanterweise gibt es hier kaum nennenswerte Strichstärken-Unterschiede. Kann es sein, dass das auch mit den Hinting-Einstellungen der diversen Anbieter zu tun hat?

Link zu diesem Kommentar
Carlito Palm

nur mal ein einwurf eines gestalters, der von programmierung so gut wie keine ahnung hat: kann es sein, dass es einfach daran liegt, dass dieser code hier fehlt:

"-webkit-font-smoothing: antialiased;"

 

anm: ich hatte letztens ein ähnliches problem, allerdings war auf safari/mac alles zu fett und unter windows alles normal.

Link zu diesem Kommentar
Metatype

@ grinsekatze: Also ich kann das genannte Phänomen in Firefox 23 und Safari 5.1.8 auf Mac OS X 10.6.8 nicht beobachten. Auf meiner »Retro-Partititon« XD mit Firefox 3 und Safari 4.0.3 auf Mac OS 10.4 wird der Font in Firefox garnicht vom CSS gefunden (im Safari funktionierte es). Wenn ich jedoch dann in der font-face Deklaration »font-weight: normal;« mit bspw. »font-weight: 400;« ersetze, wird die Brandon korrekt dargestellt.

Ich hatte schon ähnliche Probleme mit Webfonts, die sich jedoch mit der Eingabe des richtigen Weight-Codes (wie schon von Sebastian erwähnt) der verwendeten Schrift beheben ließen.

Link zu diesem Kommentar
Sebastian Nagel

Der Knackpunkt ist wirklich, rauszufinden wie die verwendete Schrift gestrickt ist ... die numerischen Gewichtangeaben sind dabei im Web meist zuverlässiger als die "Gewichts-Namen" Normal, Bold, etc.

 

Ich hatte das vorhin unter OSX 10.8 auf deiner Webseite angesehen – Safari stellt die Schrift "dünn" dar, Firefox (25) und Chrome (neueste?) stellen sie "dick" dar. Deine Formatangaben sind bisher mit "normal"  und "normal !important" angegeben – probiers mal mit "font-weight:400;".

Aber leider ist das ganze nicht trivial und von außen mit Firebug & co kaum testbar ... es hängt vom Font, @web-font-Deklaration, deinen Styles (mit allen Vererbungen!), den verwendeten HTML-Tags (Browser-Format-Defaults die ggf. reinspielen), vom verwendeten Browser und System (unter Windows sieht's überall gleich aus) ab ...

Vielleicht kann der Font-Anbieter was dazu sagen?

Link zu diesem Kommentar

Also das Problem der doppelten Verfettung, was man ja von Firefox kennt, liegt hier nicht vor. Daher hatte ich es in meinem ersten Betrag der Einfachheit halber auch gar nicht erwähnt. Das tritt bei Carmens Seite erst auf, wenn man auf font-weight: 600 erhöht. 

 

In der kommenden Firefox-Version (25) wird man die Kantenglättung von Firefox unter OS X gezielter steuern können:

https://bugzilla.mozilla.org/show_bug.cgi?id=857142

 

Dann kann man das ganze ja noch einmal testen. 

Link zu diesem Kommentar
Sebastian Nagel

Habs mal aus Interesse mit FF25-b4 und Firebug unter OSX 10.8 auf der Webseite getestet:

 

Wenn du dem Format die folgende Zeile hinzufügst, sieht der Text wirklich "leichter" aus.

-moz-osx-font-smoothing: grayscale;

(Ich habe es der CSS-Regel    #content .project.small .title span     angehängt, ich weiß nicht ob da wirklich die passendste Stelle ist)

 

das selbe gibts für Webkit (Webkit/Blink-Chrome macht in der Standardeinstellung auch zu fett, im Gegensatz zu Webkit-Safari) mittels

-webkit-font-smoothing: grayscale;

 

Das Thema ist bisher wohl eher schlecht im Netz dokumentiert und es gibt noch andere Parameter ... (man suche nach -webkit-text-stroke :)

Link zu diesem Kommentar
grinsekatze

Noch ein DANKE für eure Hilfsbereitschaft!

Die Tipps haben wir noch ausprobiert, machen aber leider gar keinen Unterschied.

 

Falls ich irgendwann eine Lösung finde, halte ich euch auf dem Laufenden :)

Link zu diesem Kommentar

Die Tipps haben wir noch ausprobiert, machen aber leider gar keinen Unterschied.

 

Der Vorschlag aus den letzten zwei Beiträgen wird ja auch erst in der nächsten Firefox-Version greifen. 

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

Unsere Partner

Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
FDI Type Foundry besuchen
Entdecke hunderte Font-Sonderangebote.
Hier beginnt deine kreative Reise.
FDI Wiking jetzt kostenlos laden und nutzen …
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.