Wie einige von euch vielleicht mitbekommen haben, hab ich die letzten Tage ziemlich am Design geschraubt. Heißt, im Prinzip ist alles neu. Einer der Neuigkeiten ist, dass von nun an die in Ubuntu 10.10. eingeführte Schriftart ubuntu-font-family verwendet wird.
Da außer Ubuntu in der neuesten Version, kein anderes Betriebssystem die Schriftart von Natur aus beherrscht, muss ein wenig Extra-Arbeit geleistet werden. Ist eine Schriftart auf dem System vorhanden, so reicht es wie immer die Schriftart mittels CSS festzulegen.
font-family: Ubuntu;
Da aber, wie bereits angesprochen, nur Ubuntu diese Schriftart von Haus aus mitbringt, muss man entweder Ausweich-Schriftarten festlegen und/oder die Schriftart beim Aufruf der Seite auf den Computer des Nutzers bringen. Dazu gibt es mehrere Möglichkeiten.
Einfach, aber teuer
Eine Möglichkeit ist es die Schriftart, die im .ttf-Format vorliegt, beim ersten Seitenaufruf auf den Benutzer-Computer zu laden. Dies sollte man am Anfang der CSS-Datei wie folgt befehlen.
@font-face {
font-family: Ubuntu;
src: url(ubuntu.ttf);
}
Das Problem bei dieser Methode: Sie kostet jede Menge Traffic. Ist die .ttf-Datei zum Beispiel 400 KB groß und auf die Seite kommen täglich 1.000 Benutzer, so werden täglich zusätzlich 400 MB an Traffic erzeugt. Das ist eine ganze Menge. Die Methode kann also eher auf sehr kleinen Seiten, mit wenigen Besuchern angewandt werden.
Die Schriftart liegt als .woff vor
Das Web Open Font Format ist ein Container-Format für Schriftarten, indem die „normalen“ Schriftdateien (z.B. .ttf) in komprimierter Form vorlegen. Der Nachteil des viel größeren Traffic-Verbrauchs wird damit also ausgemerzt. Allerdings unterstützen bisweilen noch nicht alle wichtigen Browser das Dateiformat. Außerdem muss man die Schriftart auch im .woff zur Verfügung haben. Wie man sich selbst so ein Pakte schnüren kann, hab ich leider noch nicht herausfinden können. (Update: Habs jetzt rausgefunden und gleich einen Artikel darüber verfasst.)
Ja genau, Google. Google hat wie so oft eine Antwort auf ein Problem. Mit einem kurzen Code-Stück ist es möglich, dem Browser zu befehlen, dass er sich die Schriftart herunterlädt. Nicht aber wie im ersten Fall von meinem Server, sondern von einem Google-Server.
Auf google.com/webfonts kann man sich einen Code generieren lassen, den man dann im <head>-Tag der Homepage einbinden muss. In meinem Fall sieht der Code wie folgt aus:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold' rel='stylesheet' type='text/css'>
Je nachdem welche Schriftart man verwenden will, ändert sich natürlich der Code. Man sollte auch festlegen, ob nur die normale Schriftart verwendet werden soll oder ob man zum Beispiel auch die Zeichen für „fett“, „kursiv“ sowie „fett+kursiv“ benötigt. In meinem Fall werden die Dateien für „fett“ und „normal“ heruntergeladen, da ich kursiv eher selten verwende und so weniger Traffic beim Benutzer (und bei Google) generiert wird.
Fehlt zum Beispiel die Schriftdatei für das „fette“ Schriftbild, so verbreitert der Browser die Schriftart von selbst. Allerdings sieht die Schrift nachher meist nicht so schön aus, als wenn man das richtige Schriftbild verwendet.
Schreibe einen Kommentar