CSS3-Webfonts: Kernig!
Für Safari-Nutzer sieht meine Website ab sofort etwas anders aus: Nachdem die gestern erschienene Version 3.1 als erster Browser unter anderem die CSS3 Webfonts unterstützt, habe ich mich in dieser Sache einmal etwas schlau gemacht und meine Überschriften geändert.
Besucher mit Safari bekommen nun statt der Georgia die wundervolle Vollkorn von Friedrich Althausen zu sehen.
Sie eignet sich für meine Zwecke perfekt:
Sie ist kostenlos (CC), schlank (nur 32 KB) und sieht hervorragend aus.
Der Unterschied ist im Vergleich zum Sprung Share vs. Helvetica bei Michael nicht so deutlich, aber dennoch zu erkennen.
Die CSS-Einbindung ist simpel und in wenigen Minuten erledigt:
@font-face {
font-family: Vollkorn;
src: url(‘vollkorn.otf‘);
}
h1 {
font-family: Vollkorn (…) serif;
}
Mit dem @font-face-Tag wird die zu ladende Schrift spezifiziert. Alle anderen Browser ignorieren diese Angabe momentan (noch) und stellen stattdessen die zweite Schrift in der Liste dar.
Hat man die gewünschte Schrift auf seinem Rechner ohnehin installiert, funktioniert die Darstellung in der Vollkorn logischerweise auch in allen anderen Browsern, aber das ist ja ein alter Hut.
So siehts jetzt mit Safari 3.1 aus:
Bei der Wahl der Schrift muss man natürlich auf die jeweiligen Lizenzbedingungen achten:
Man kann zwar jede beliebige Schrift einbetten, darf es aber nicht.
Update: Auch das Developer-Panel von Safari ist entsprechend für die Webfonts gerüstet:
5× letzter Senf
25.03.2008, 11:55 Uhr
sehr interessante geschichte… bin sehr gespannt was uns da in zukunft noch alles erwartet.
werde nachher auf jedenfall noch nach weiterführenden büchern dazu stöbern.
mfg
28.03.2008, 09:15 Uhr
Wie von Dir erwähnt wird vor allem das Thema Lizenz der Hauptknackpunkt dieses alternativen Schriftangebotes via CSS sein. Die Darstellung im Developer-Panel ist allerdings wirklich klasse!