Webfonts Umgang mit kursiven Schnitt und Fallbacks?

[[Mitglied Tobi…]]

Nabend ihr,

 

also ich arbeite grad das erste mal mit Webfonts und habe scheinbar ein grundlegendes Konzept nicht verstanden … ich binde in meine Seite sowohl den regular, als auch den kursiven Schnitt der EB Garamond ein mittels

/*Regular*/
@font-face {
    font-family: 'EBGaramond';
    src: url('/fonts/ebgaramond-webfont.eot');
    src: url('/fonts/ebgaramond-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/ebgaramond-webfont.woff') format('woff'),
         url('/fonts/ebgaramond-webfont.ttf') format('truetype'),
         url('/fonts/ebgaramond-webfont.svg#eb_garamondregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*Italic*/
@font-face {
    font-family: 'EBGaramondItalic';
    src: url('/fonts/ebgaramond12-italic-webfont.eot');
    src: url('/fonts/ebgaramond12-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/ebgaramond12-italic-webfont.woff') format('woff'),
         url('/fonts/ebgaramond12-italic-webfont.ttf') format('truetype'),
         url('/fonts/ebgaramond12-italic-webfont.svg#eb_garamond12_italic') format('svg');
    font-weight: italic;
    font-style: normal;

}

Soweit so gut. Damit kann ich über font-family sowohl die Familie als auch den Schnitt wählen. Was muss ich denn machen, um den Schnitt wie üblich mit font-style wählen zu können?

 

Das Problem: Der <em>-Tag wird doppelt kursiv … wenn ich font-family:'EBGaramondItalic' einstelle und nix weiter, dann kommt aus dem Browser-Stylsheet ein font-style:italic dazu, dass mir die bereits kursive Schrift zusätzlich schrägstellt. Das kann ich beheben, wenn ich für <em> font-style:normal ergänze aber das kann doch so nicht gedacht sein, oder?

 

Zusatzfrage: Muss ich bei der Verwendung von Webfonts auch noch Fallback schriften angeben oder können die meisten Browser inzwischen mit Webfonts umgehen?

 

Liebe Grüße

Tobi

 

PS: Ich habe den Link http://www.typografie.info/2/content.php/114-typowissen gefunden, aber er geht nicht mehr …

[Ralf Herrmann]

Die beiden Schnitte haben unterschiedliche Familiennamen – das kann also nicht klappen. 

Wenn du die Familienmitglieder über font-weight und font-style verknüpfen willst, muss der Familienname identisch sein. 

[[Mitglied Tobi…]]

Danke Für den kursiven Schnitt klappt das, wenn ich das gleiche aber für Kapitälchen versuche (font-variant:small-caps) dann verwendet der Browser falsche Kapitälchen und greift nicht auf den echten Schnitt zu. Hast du eine Idee, woran das liegen könnte? Oder muss ich für die Kapitälchen einfach eine neue Familie (EBGaramondSC) definieren?

 

Und wie sieht es mit en Fallbacks aus? Angeben oder nicht?

 

Und hast du eine gute Einführung zu dem ganzen Webfont / Schriften im Web 2.0 Komplex parat?

[Ralf Herrmann]

Die Kapitälchen-Funktion in CSS erzeugt immer falsche Kapitälchen. Zukünftig wird man das über OpenType ansprechen können, aber das funktioniert noch in zu wenigen Browsern. 

Besser also einen Kapitälchenschnitt nehmen und den dann einfach direkt als Formatierung zuweisen. 

 

Ein Fontstack benutzt man weiterhin. 

 

Bisschen Grundlagenwissen:

http://webtypobuch.de

[[Mitglied Tobi…]]

Alles kar. Danke dir!

[[Mitglied Þors…]]

Und außerdem (?) hat sich ein Tippfehler/Wortdreher eingeschlichen:

    font-weight: italic;
    font-style: normal;

Es muss natürlich 

    font-weight: normal;
    font-style: italic;

heißen.

[[Mitglied Tobi…]]

Ups … danke

 

Gute Nacht!