Natürlich ist es mal wieder die Internet-Explorer-Familie, die extreme Perdormanceprobleme aufweisen, aber auch sämtliche andere Browser bekleckern sich im Umgang mit der noch recht jungen Technologie kaum mit Ruhm. FOUT – flash of unstyled text ist dabei noch das kleinste Problem, wenn die Fontdateien nicht schnell genug vom Server geliefert werden. In IEs wirkt sich das noch schlimmer aus: bis zum Download des Fonts zeigt Bill Gates Rache gar nichts an. In anderen Browsern bleiebn nur die Textteile, die mit @font-face gerendert werden sollen unsichtbar, Firefox zeigt die Ausweichschrift(en) an.

Solchen (und den anderen im Text genannten) Performancefallen kann man natürlich mit Caching, Zipping und ähnlichzen Techniken begegnen. Ob man sich aber den Aufwand leisten will, bereits zum jetzigen Zeitpunkt, ich stelle das mal in Frage…

@font-face {
  font-family: 'Graublau Web';
  src: url(GraublauWeb.eot);
  src: local('Graublau Web Regular'), local('Graublau Web'),
         url(GraublauWeb.otf) format('opentype');
}

Puh. Ist das gekärt.

Designers can currently participate, but not contribute, to the Drupal community.

Lesbarkeit. Martin Liebig stellt im Designtagebuch seine Studie über die Lesbarkeit von Webschriften vor und sich gleichzeitig gegen den Verdana-Einheitsbrei. Hurra.

Sachbearbeiter mit Zuständigkeitsrandgebiet Optik sind dies oft, die den Reiz guter Typografie auf den Faktor “Lesegeschwindigkeit” reduzieren, weil man Ästhetik und Themenadäquatheit leider nicht in Sekunden messen kann. Jene Menschen sind es, die uns gerne sagen: Serifen sind schlecht lesbar auf dem Monitor, das weiß doch inzwischen jeder, nimm lieber “Verdana”. Gerne folgt der Zusatz: Macht Spiegel Online doch auch. Spiegel Online kommt irgendwann immer.

Da wird sich in Zukunft noch einiges tun.

Landtagswahlen. Lahm trifft blind konstatiert Luebberding bei weissgarnix.de und liefert schon den Abgesang auf Angela Merkel, die Kanzlerinnendämmerung sozusagen:

Frau Merkel hat leider nur gute Zustimmungswerte. Aber die sind nicht ihrer Politik geschuldet, sondern weil sie als Kanzlerin nicht in Erscheinung tritt. Sie erinnert den Wähler an den netten Verwandten in der eigenen Familie, den zwar jeder mag, aber keiner ernstnimmt. Der wird aber nicht zum Bundeskanzler gewählt.

www.markboulton.co.uk

Ich seh’s kommen, am Ende haben wir wieder eine (dann nicht mehr so) große Koalition.

Mit @font-face lassen sich Schriften in Webseiten einbetten. Machen Sie das!

Ok, es ist soweit, mit dem neuen Firefox 3.5 (und Safari 4 und Opera 10beta), steht immer mehr Nutzern unserer Websites Fontembeddingdownloading¹ zur Verfügung. Damit widerum steht der flächendeckenden Umsetzung typographisch ordentlich gestylter Websites nicht mehr viel im Weg, ausser natürlich die IE-Familie, aber die ignorieren wir hier einfach einmal.²

Und so geht’s

Das obige Beispiel nutzt das Embedding, der Code dafür sieht ungefähr so aus:

@font-face {
    font-family: Kaffeesatz;
    font-weight: normal;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
h1 {
	font: normal 3em/120% Kaffeesatz, sans-serif;
	text-shadow: 1px 1px 1px #eee;
}

Der genutzte Font ist die unter CC Lizenz stehende Kaffeesatz. Der Code ist vielleicht nicht ganz selbst erklärend: mit @font-face legen wir selbst eine Font fest, den Namen der font-family kann man dabei frei wählen, ein dem Font nahe stehender Name empfiehlt sich natürlich. Als src wird der Pfad zum OTF- oder TTF-File angegeben, danach noch das format. Fertig. Damit steht uns die font-family „Kaffeesatz” zur weiteren Nutzung zu Verfügung. Das H1 macht auch gleich Gebrauch davon, noch ein wenig versüsst mit etwas CSS3-text-shadow (wenn wir auf den IE sch…sen, dann aber richtg).

Mehr Gewicht, bitte

Folgendes ist zu beachten: wir haben bis hier nur den Font für die font-weight normal definiert. Wollen wir eine bolde Schrift, muss ein Font dafür embedded werden, und zwar bspw. so:

@font-face {
    font-family: Kaffeesatz;
    font-weight: normal;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: bold;
    src: url(fonts/YanoneKaffeesatz-Bold.otf) format('opentype');
}
h1 {
	font: normal 3em/120% Kaffeesatz,sans-serif;
	text-shadow: 1px 1px 1px #eee;
}
h2 {
    font: bold 2em/120% Kaffeesatz, sans-serif;
    text-transform: uppercase;
}

In diesem Falle würden die H2s bold gesetzt, da wir hierfür YanoneKaffeesatz-Bold.otf embedded haben. Ähnliches können wir nun auch mit font-style: italic anstellen.

Nochmal zurück zur Fettung: Safari kann einige Fettungsstufen mehr anzeigen als Firefox. Unterstützt wird eine genauere Abstufung des Fettungsgrades, wenn man bspw. einen Font hat die Kaffeesatz. Das kann dann so aussehen:

@font-face {
    font-family: Kaffeesatz;
    font-weight: 100;
    src: url(fonts/YanoneKaffeesatz-Thin.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 300;
    src: url(fonts/YanoneKaffeesatz-Light.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 400;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 700;
    src: url(fonts/YanoneKaffeesatz-Bold.otf) format('opentype');
}

Das geht sicherlich auch mit keywords wie „light” oder „bolder” etc.

Das Fontrendering unterscheidet sich mitunter, links Firefox, rechts Safari 4 (Mac).

Fonts von der Platte zuerst

Was ja auch angehen kann, ist dass man eher einen Font nutzen möchte, der sowieso schon lokal vorhanden ist und nur wenn dieser nicht vorhanden ist, will man einen Download anbieten. Geht auch, wie man bei John Dagget nachlesen kann, mit der Eigenschaft „local”:

@font-face {
  font-family: NeueHelvetica;
  src: local("Helvetica Neue"),
       local("HelveticaNeue"),
       url(fonts/MgOpenModernaRegular.ttf);
}

Hier sind zwei local angegeben, über diese Liste wird iteriert, genauso wie in der normalem font-family Zuweisung, wo die Schriften durch Kommata getrennt werden (das diese Zusammenstellung von Namen nicht immer ganz einfach ist, lesen wir bei Herrn Preidel).

Und nun?

Natürlich sollte man nur Schriften nehmen, die man auch fürs embedding benutzen darf, sonst gibt’s schnell Lizenzärger. Hier gibt’s ein paar freie Schriften, die das ausdrücklich zulassen. Ach ja und zum guten Schluss, sollte man font-size-adjust auf keinen Fall vergssen.

Updates

¹⁾ Von „Embedding“ zu sprechen ist eigentlich nicht richtig, weil der Font tatsächlich auf den Rechner des Nutzers heruntergeladen wird. Das schlägst sich natürlich auch in der Größe der Website nieder und ist auch für die Lizenzfrage nicht unerheblich.

²⁾ Na gut, ich hab noch einen Link aus meinen Bookmarks geangelt, der mehr in Sachen IE verrät.