labuero

< frontend developer >

Kursive Kursivschrift und Typoeichörnchen

In meinem letzten Projekt konnte ich mich ausgiebig mit Webfonts beschäftigen. Kein so einfaches Feld. Vor allem weil einem die unterschiedlichen Renderings der Browser in Sachen Zeilenabstand und Laufweite immer wieder in die Quere kommen – in dem Projekt fiel es allerdings besonders stark auf und würde bei normalen Fließtext weniger Probleme machen.

Auch das einbetten der Fonts kann manchmal seine Tücken haben. So kann man eine Font mit samt seinen Schriftschnitten alle unter dem gleichen Namen einbetten.
Die Quelle verweist dabei dann auf die Datei mit der italic oder der bold usw. In den weiteren Angaben wird weight und style festlegen um die verknüpfte Font zu beschreiben. Man sollte aber nicht vergessen, dass es neben Bold auch Medium, Black oder Light sowie Medium Italic, Light Italic usw. gibt. Dafür nutzt man dann bei der Angaben der Schriftdicke Zahlen. 400, 500, usw.

So in der Art bekommt man die Schriften auch aus den google Webfonts serviert und an dem Beispiel sollte es etwas klarer werden:

@font-face {
  font-family: 'Josefin Slab';
  font-style: italic;
  font-weight: 400;
  src: url('josefin-slab-italic400-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 700;
  src: url('josefin-slab-700-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 400;
  src: url('josefin-slab-400-webfont.woff') format('woff');
}

Alle Schriften bekommen den gleichen Namen 'Josefin Slab' und den Zusatz font-style: sowie font-weight: um die Quelldatei hinter src: zu beschreiben. Vorteil: So kann man einmal für den body die Typo festlegen, muss sich dann beim weiteren CSS schreiben keine Gedanken mehr machen und kann problemlos per font-weight: und font-style: hin und her switchen.

Das funktioniert soweit auch ganz gut, nur leider gab es zwischenzeitlich Probleme mit einer Font im IE9, wobei ich immer noch nicht sagen kann, wo genau das Problem lag.

Ich musste mich jedenfalls nach einer Alternative umsehen und wollte die Fontainebleau nicht mehr von extern beziehen.
Auch wenn wir mit dem Web Open Font Format (woff) für Webschriften auf einem guten Weg sind, unterstützen dieses noch lange nicht alle Browser – und werden es auch nie. Nun muss ich die Schrift erst einmal um die vielen unnützen Sonderzeichen bereinigen und in mindestens vier unterschiedliche Formate bringen. Um es abzukürzen: mit dem @FONT-FACE GENERATOR auf www.fontsquirrel.com habe ich alles gefunden was ich benötigte. Fonts hochladen, konvertiert in alle gängigen Formate und inklusive CSS-Code zurück. Besser geht’s nicht.

Der enthaltene CSS-Code ist allerdings , sofern man ihn nicht anpasst, etwas anders als der von google.

@font-face {
    font-family: 'NobileItalic';
    font-style: normal;
    font-weight: normal;
    src: url('nobile_italic-webfont.woff') format('woff'),
}

@font-face {
    font-family: 'NobileBold';
    font-style: normal;
    font-weight: normal;
    src: url('nobile_bold-webfont.woff') format('woff'),
}

Hier findet eine Unterscheidung nur über die font-family statt und da lauert eine Fehlerquelle, in die auch ich gestolpert bin. Weist man einem Element die font-family einer kursiven Schrift zu und stellt sie, weil man es einfach so gewöhnt ist, den Style auf italic, kommt es im Firefox dazu, dass dieser die Schrift nochmals schräg stellt so das sie fast umfällt.

.kusiv{
     font-family: 'NobileItalic';
     font-style: italic;
}

Dieses Phänomen konnte ich allerdings nur im Firefox beobachte.
Wie dem auch sei, die erste Variante ist die Bessere. Weniger Schreibarbeit und weniger fehleranfällig.

Was ich hier unterschlagen habe ist, dass man beim Einbetten der Schrift nicht nur eine Fontdatei hat, sondern nacheinander die unterschiedlichen Formate einbettet.

So sieht es bei fontsquirrel aus – sogar gleich mit einem Fix für die Internet Explorer.

src: url('nobile_italic-webfont.eot');
src: url('nobile_italic-webfont.eot?#iefix') format('embedded-opentype'),
     url('nobile_italic-webfont.woff') format('woff'),
     url('nobile_italic-webfont.ttf') format('truetype'),
     url('nobile_italic-webfont.svg#NobileItalic') format('svg');

Sobald ein Browser das Schriftenformat gefunden hat mit dem er umgehen kann, bricht er ab und ignoriert den Rest.

Bei der Einbettung aus dem google fontdirectory liefert google automatisch den richtigen Schriftentyp für den jeweiligen Browser aus. Noch weniger Arbeit, wenn es denn funktioniert.

1 Kommentar

  1. Michael Pörsch

    Ich möchte den Font „Josefin Slab“ auch gerne verwenden und mir fällt auf, dass Chrome (Version 31) die Umlaute nicht anzeigt (A statt Ä), Firefox (Version 24) dagegen schon. Den Code und das woff-File habe ich mit dem Font-Face Generator erstellt.
    Interessant dabei: das Tool BabelMap zeigt bei den Umlauten einen anderen Font und FontForge zeigt die Umlaute korrekt an. Es sieht im FontForge nach einer Art Referenz aus mit zusätzlichen Punkten („dieresis“).
    Entweder liegt das Problem im Font oder in der Implementierung der Browser. Tja, Pech für die Chrome-Benutzer 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.