Typographie im Web

CSS / Webdesign & Entwicklung 19. 08. 2010

Typographie im Web

Wer den Arial-Verdana-Times-Courier-Mix im Web nicht mehr sehen kann, hat mittlerweile mehrere Möglichkeiten.
Nach über 15 Jahren Kampf mit Webfonts gibt es nun Lösungen der Browser – allerdings verschiedenste.

Schriften mit CSS 2+

Die meisten Browser – Internet Explorer 8 und kleiner ausgenommen – verstehen Schriften im OTF und TTF-Format. Der Internet Explorer hat das eigenwillige EOT-Format. Gottseidank existieren aber Tools, mit denen man TTF in EOT umwandeln kann.

Per CSS kann man dann beide Varianten wie folgt einbinden:

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

Dabei wird in der ersten “src”-Zeile die EOT-Datei an den Internet Explorer übergeben; in der 2. Zeile die OTF-Datei an alle anderen. Mit “local” sperrt man den IE von der Zuweisung aus.

Google WebFonts

Einfacher macht es einem zur Zeit Google. Durch das Einbinden einer Schrift aus dem Google-Directory mit z. B. der Zeile

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

kann man dann über CSS auf die Schrift zugreifen:

CSS selector {
  font-family: 'Font Name', serif;
}

Der Vorteil bei Google ist, dass die Verwendung der Schriften rechtlich unbedenklich ist – was bei “normalen” TTF-Dateien nicht oft der Fall ist.

Quellen

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...
Beitrag drucken

Autor

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.