@font-face: Schriftarten per CSS crossbrowser-kompatibel darstellen

Gestern hatte ich mal kurz etwas Luft und konnte noch ein paar Layout-Sachen hier im Blog erledigen. Folgendes hat sich jetzt verbessert (aus meiner Sicht natürlich):

  • Kommentare jetzt strukturierter mit Gravatar-Bild und Font-face
  • Autoreninfo unterhalb der Posts eingebaut
  • Social Media Profile rechts oben gekürzt (da waren vorher sage und schreibe 8 unterschiedliche Profilicons)

Bei der Integration dieser Layout-Änderungen fiel ich dann über ein Problem mit @font-face im Firefox 3.5, das ich nebenbei auch bei der Entwicklung meiner neuen Agentur-Seite hatte. Das ist Grund genug, um mal etwas auf @font-face einzugehen.

@font-face: Schriftarten crossbrowser-kompatibel per CSS verwenden

Für alle, die @font-face noch nicht kennen. Das ist eine komfortable Methode innerhalb von CSS, um Schriftarten, die nicht beim Client installiert sind, innerhalb der eigenen Webseite verwenden zu können. Sprich, was ich früher umständlich mit Überschriften-Grafiken lösen musste, klappt jetzt komfortabel in allen neueren Browsern per @font-face-Deklaration. Wie sieht das denn nun aus? In der rechten Spalte hier im Blog werden z.B. alle h2-tags per font-face gestaltet.

Dabei sieht eine typische font-face Deklaration im Stylesheet folgendermaßen aus:

@font-face {
  font-family: "NotethisRegular";
  src: url("Note_this-webfont.eot");
  src: url("Note_this-webfont.eot?iefix") format("eot"),
    url("Note_this-webfont.woff") format("woff"),
    url("Note_this-webfont.ttf") format("truetype"),
    url("Note_this-webfont.svg#webfonty06M8V4K") format("svg");
  font-weight: normal;
  font-style: normal;
}

Dieser Code-Schnippsel geht auf diesen Blog-Eintrag von Richard Fink zurück. Man sieht in diesem Code, dass man 4 verschiedene Datei-Formate ein- und derselben Schriftart benötigt, nämlich:

  1. .eot
  2. .woff
  3. .ttf
  4. .svg

Wie man komfortabel an diese Formate herankommt, erkläre ich weiter unten.

Nach dieser Deklaration kann ein Text-Element innerhalb von CSS ganz einfach in der oben definierten Schriftart dargestellt werden. Crossbrowser-kompatibel. Hier im Blog werden z.B. die Widget-Title-Tags per font-face gestaltet.

.widgettitle {
  font: 18px/24px 'NotethisRegular', Arial, sans-serif;
}

Der erste Pixelwert bezieht sich auf die eigentliche Schriftgröße, der zweite Pixelwert gibt die Zeilenhöhe an. Der dritte Wert ist dann der in der Deklaration festgelegte font-family-Bezeichner.

FOUT-Probleme mit Font-face
Nach der obigen Syntax hatte ich dann die gewünschte Schriftart von Font-Squirrel eingebunden und war eigentlich mit dem Ergebnis zufrieden. Wäre da nicht das ständige Aufflackern beim Laden der Schrift gewesen. Ein relativ bekanntes Problem im Zusammenhang mit font-face, das auf den Namen FOUT („Flash of unstyled text“) hört.

Beim Laden der Seite wurde immer erst die ungestylte Schrift angezeigt und etwa 1 Sekunde später sah man deutlich, dass die Font-face Regel vom Browser „entdeckt“ und angewendet wurde und die Schriftart wurde umgeschaltet. Das machte die ganze Seite unruhig und sah wenig professionell aus. Diese Probleme betreffen allerdings „nur“ Firefox und Opera.

Folgendes Script von Paul Irish (wieder einmal…) löst zumindest das Flacker-Problem (mit einer unangenehmen Nebenwirkung):

(function(){
  // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
    s.textContent = 'body{visibility:hidden}';
    e.firstChild.appendChild(s);
    function f(){ s.parentNode && s.parentNode.removeChild(s); }
    addEventListener('load',f,false);
    setTimeout(f,3000);
  }
})();

Dieses Script bewirkt, dass die gesamte Seite erst angezeigt wird, wenn die Schriftart fertig geladen ist bis zu einer Höchstgrenze von 3 Sekunden. Eingebunden auf jeder Seite mit font-face Deklaration, ergab das Ganze eine ziemlich unschöne Wartezeit. Diese Lösung ist für mich also eher keine Alternative. Eine weiterer Lösungsansatz ist der Einsatz vom Google Webfont-Loader, der jedoch ebenfalls inakzeptable Ladezeiten mit sich brachte.

Mein Fazit lautet daher aktuell, dass ich das Flackern bei langsameren Leitungen in Kauf nehme für ein schöneres Schrift- und Gesamtbild.

Woher bekomme ich kostenlose Fonts für den Einsatz in @font-face?

Meine Lieblings-Seite für freie Schriftarten ist Font Squirrel. Diese Seite hat den großen Vorteil, dass die Schriften

  1. absolut kostenlos sind,
  2. in fertigen @font-face Sets herunterladbar sind
  3. und anschauliche Demos und Beispieldateien beinhalten.

So entfällt lästige Schriftarten-Konvertierung und die Abklärung der Rechte und evtl. anfallende Lizenzgebühren. Anfänger können dank der Beispiele schnell durchstarten. Wer doch mal eine bestimmte Schriftart braucht, die nicht im Sortiment von Font Squirrel drin ist und diese in ein font-face-kompatibles Format bringen möchte, nutzt einfach den Font-Face-Kit-Generator. Dabei unbedingt beachten, dass man über die notwendigen Rechte an der Schriftart verfügen muss.

Wo finde ich weitere Informationen zum Thema @font-face?

Mein Fazit

Da ich noch nicht sooo lange im Thema CSS und Crossbrowser-Kompatibilität bin, war @font-face für mich vor ein paar Monaten eine schiere Offenbarung. Wieviel Zeit ich mit dieser Technik von diesem Zeitpunkt an sparen konnte und welche Design-Möglichkeiten sich dadurch eröffnen, war und ist großartig. Vorher mussten immer Grafiken zu Überschriften gebaut werden. Allerspätestens in multilingualen Projekten ist das einfach grausig. Und spätestens, wenn dann mal jemand fragt „Könnte man die Überschriften nicht blau machen?“, ist es vorbei mit der guten Laune.

Nicht nur, dass die Ladezeit und die Requests durch die wegfallenden Überschriftengrafiken deutlich verringert werden, sieht das Ganze einfach gut aus (mal abgesehen von der FOUT-Problematik). Beim Zoomen, beim Markieren und auch in der Normalansicht. Ich bin also seit dem Zeitpunkt, als font-face in den major browsers druchweg lief, ein großer Fan von font-face und könnte heute nicht mehr ohne. Wenn jetzt noch die Text-Rendering-Engines vereinheitlicht werden würden. Aber man kriegt ja nie alles auf einmal. =)

Nutzt ihr @font-face? Ist das für euch nur Spielerei oder mittlerweile eine Bereicherung des Webdesigns? Wie und wo setzt ihr Nicht-Systemschriftarten am liebsten ein? Ich bin wie immer gespannt auf eure Meinungen!

3 Comments on “@font-face: Schriftarten per CSS crossbrowser-kompatibel darstellen

  1. Ich finde, gerade für dieses Thema lässt sich optimale Software finden. Der Großteil ist natürlich leider kostenpflichtig – und das wirklich nicht zu knapp. Daher ist es schon besser, wenn man vieles selbst kann.

  2. @font-face ist ganz klar eine Bereicherung für das Webdesign. Und Font Squirrel ist wirklich eine wundervolle Seite. Das Problem an allen Typoseiten ist nur die Vielfalt der angebotenen Schriften. Ich kann mich da nie entscheiden, auch wenn ich vorher eine klare Vorstellung im Kopf hatte. Ich suche serifenlos und komme dann mit einer wundervollen Serifenschrift im Gepäck zurück.
    Deswegen benutze ich nur Standardschriften. :)
    @Sven: Ich finde eigentlich, daß die Preise für die Einbindung von Schriften extern erstaunlich niedrig sind.

  3. Superschönes Tutorial zum fontface mit css. Habe genau sowas gesucht für eine meiner Seiten. Da hat mir die Optik immer noch nicht gefallen. Habe hier eine schöne Anregung bekommen wie ich das ganze nun besser umsetzen kann. Danke dafür!
    LG
    Andy

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>