Webfont Neo Sans einbinden - aber etwas stimmt nicht

[matgehrke]

hallo zusammen.

ich bearbeite zur zeit unsere firmenhomepage. da wir als neue schrift Neo Sans eingeführt haben soll diese nun auch auf unserer homepage abgebildet werden.

leider stimmt hier irgendwas nicht - wer kann helfen?

=> die einbindung erfolgte über http://www.fonts.com/web-fonts, wobei nur ein link in den HEADER bereich eingetragen werden mußte. in dem webfont portal wird dass für die einzelnen styles der css datei der neue definiert, welcher dann beim abruf der seite verwendet wird.

=> das ergebnis ist aber eher schlecht als recht. (www.dataflor.de)

eine andere große firma setzt neo sans aber grafisch optimal auf der website ein (www.intel.de). wie ist dies dort gelöst? wie erhalte ich auch so eine qualität?

besten dank

[Matthias Apsel]

Om nah hoo pez nyeetz, matgehrke!

Ich vermute, es liegt an der Qualität des Fonts. Das sieht man zumindest, wenn man sich die Schriftarten im Firebug anschaut.

Matthias

[Schuer]

leider stimmt hier irgendwas nicht - wer kann helfen?

In den Headlines nutzt ihr font-weight: bold. Das ist bei Webfonts nicht geschickt (weil das Bold dann vom Browser kommt), sondern ihr solltet stattdessen eine Bold-Variante des Fonts — unter Angabe von font-weight: normal — verwenden.

Viele Grüße
_Dirk

[matgehrke]

hallo dirk.

danke für die info. das mit den headlines habe ich verstanden.
nur was ist mit dem "normalen" text im body. hier sieht der auf der inel seite wesentlich harmonischer aus und ist nicht so zusammengerückt.

gibt es denn einen unterschied zwischen dieser "lademethode" oder selbst gehosteten fonts? dieses bietet fonts.com nähmlich auch noch an.

danke
matthias

[Schuer]

nur was ist mit dem "normalen" text im body. hier sieht der auf der inel seite wesentlich harmonischer aus und ist nicht so zusammengerückt.

Intel benutzt offensichtlich eine eigene Variante der Neo Sans (font-family: "neo-sans-intel", …), vielleicht ist die auf ihre Bedürfnisse (Schriftgröße, Laufweite, Kerning und Krams) optimiert worden.

Deine Variante von fonts.com ist generisch, und vielleicht steht sie ausgerechnet im von euch verwendeten Style nicht perfekt. Versucht doch mal etwas damit rumzuspielen, indem ihr z.B. die Schriftgrößen schrittweise minimal ändert (14.1px, 14.2px, 14.3px, 14.4px, usw).

Letztendlich aber liegt's natürlich am System des Benutzers, wie die Schrift gerendert wird. Macs machen das bekanntlich sehr gut, Windows hat kein Niveau.

gibt es denn einen unterschied zwischen dieser "lademethode" oder selbst gehosteten fonts? dieses bietet fonts.com nähmlich auch noch an.

Nein, das sollte keinen Unterschied machen.

Viele Grüße
_Dirk

[Gunnar Bittersmann]

@@Schuer:

nuqneH

In den Headlines nutzt ihr font-weight: bold. Das ist bei Webfonts nicht geschickt (weil das Bold dann vom Browser kommt)

Nein, dem ist nicht so, wenn man für die Fettschrift eine eigene @font-face-Regel angibt:

@font-face  
{  
  font-family: 'my webfont';  
  font-weight: normal;  
  src: url('my-webfont-normal.eot');  
  src: local('☺'),  
       url('my-webfont-normal.eot?') format('embedded-opentype'),  
       url('my-webfont-normal.woff') format('woff'),  
       url('my-webfont-normal.ttf') format('truetype'),  
       url('my-webfont-normal.svg#my-webfont-normal') format('svg');  
}  
  
@font-face  
{  
  font-family: 'my webfont';  
  font-weight: bold;  
  src: url('my-webfont-bold.eot');  
  src: local('☺'),  
       url('my-webfont-bold.eot?') format('embedded-opentype'),  
       url('my-webfont-bold.woff') format('woff'),  
       url('my-webfont-bold.ttf') format('truetype'),  
       url('my-webfont-bold.svg#my-webfont-bold') format('svg');  
}

Lediglich in alten IEs (8 abwärts) kommt das Bold dann tatsächlich vom Browser (my-webfont-normal.eot wird fett gemacht, anstatt my-webfont-bold.eot zu verwenden).

sondern ihr solltet stattdessen eine Bold-Variante des Fonts — unter Angabe von font-weight: normal — verwenden.

Das ist also im Allgemeinen kein guter Ratschlag.

Qapla'

[Schuer]

Lediglich in alten IEs (8 abwärts) kommt das Bold dann tatsächlich vom Browser (my-webfont-normal.eot wird fett gemacht, anstatt my-webfont-bold.eot zu verwenden).

Danke für die Info! Jetzt verstehe ich nachfolgende Passage nicht:

sondern ihr solltet stattdessen eine Bold-Variante des Fonts — unter Angabe von font-weight: normal — verwenden.

Das ist also im Allgemeinen kein guter Ratschlag.

Warum kein guter Ratschlag?

Viele Grüße
_Dirk

[Gunnar Bittersmann]

@@Schuer:

nuqneH

sondern ihr solltet stattdessen eine Bold-Variante des Fonts — unter Angabe von font-weight: normal — verwenden.

Das ist also im Allgemeinen kein guter Ratschlag.

Warum kein guter Ratschlag?

Aus mehreren Gründen:

1. Weil du damit unflexibel bist bzw. mehr Aufwand hast.

Wenn du einen Namen für alle Schnitte einer Schriftfamilie verwendest, ist das ein Leichtes:

<p id="ein-name"><dfn>Hervorhebungen</dfn> können <em>innerhalb</em> des Fließtextes auftreten. Die Zusammenfassung aller Schnitte einer Schriftfamilie unter <strong>einem</strong> Namen ist <i lang="en">state of the art</i>.</p>

#ein-name { font-family: 'my webfont', serif }

Hast du hingegen verschiedene Namen 'my webfont normal', 'my webfont bold', 'my webfont italic', 'my webfont bold italic', wird’s viel komplizierter:

#ein-name { font-family: 'my webfont normal', serif }  
  
#ein-name dfn, #ein-name em, #ein-name i { font-family: 'my webfont italic', serif; font-style: normal }  
  
#ein-name strong, #ein-name b { font-family: 'my webfont bold', serif; font-style: normal }

Und das Ganze dann auch für andere Elemente, nicht nur für #ein-name.

2. Ist der Fallback kaputt. Wenn der Webfont aus irgendeinem Grund nicht zur Verfügung steht, gibt es keine Hervorhebung.

IMHO ist ein Name für alle Schnitte einer Schriftfamilie besser. Dann nimmt man lieber in Kauf, dass bei einigen wenigen Nutzern im IE ≤ 8 nicht die entsprechenden Schriftschnitte verwendet verden, sondern die Normalschrift fett bzw. oblique (nicht kursiv) gemacht wird.

Qapla'

[Schuer]

Herzlichen Dank dafür!

Viele Grüße
_Dirk

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Ergänzung #1:

Hast du hingegen verschiedene Namen 'my webfont normal', 'my webfont bold', 'my webfont italic', 'my webfont bold italic', wird’s viel komplizierter:
[Stylesheet für 'my webfont normal', 'my webfont bold', 'my webfont italic']

Und erst die unzähligen Kombinationen für 'my webfont bold italic'! (sowohl fett innerhalb von kursiv wie auch kursiv innerhalb von fett)

Ergänzung #2:

Das ist also im Allgemeinen kein guter Ratschlag.

Ich sagte bewusst „im Allgemeinen“.

Im Speziellen, bspw. wenn *sicher* ist, dass Überschriften keine Hervorhebungen in fett oder kursiv beinhalten können, kann man auch getrennte Namen für die Schnitte einer Schriftfamilie verwenden.

Aber was ist schon sicher?

Qapla'