Typographie im Internet ist seit jeher ein leidiges Thema. Kein Browser unterstützt vernünftige Silbentrennung, Ligaturen und, und und…
Das größte Problem ist aber die geringe Auswahl an Schriftarten. Jede Schriftart, die man auf einer Seite verwenden will, muss auch auf dem Rechner des Benutzers installiert sein und besonders ausgefallene oder besonders schöne Schriften sind meist nicht vorhanden. Wie schafft man sich also Abhilfe? Dazu gibt es verschiedene Varianten. Die erste ist ganz simpel und stellt eigentlich gar keine Lösung dar:

1. Viele Alternativschriftarten
Möglich ist z.B. soetwas:

Code:

font-family: 'Trebuchet MS', Calibri, Tahoma, Verdana, Arial, Helvetica, sans-serif;

Wer das Glück hat, ein neueres Windows (XP) zu besitzen, der bekommt die wunderschöne Trebuchet MS zu Gesicht (welche übrigens auch die Content-Schriftart dieses Adventskalenders ist). Danach wird Calibri (Windows Vista) angewandt, ist diese nicht vorhanden, geht es mit der Schönheit immer weiter abwärts, bis irgendwann sans-serif erreicht ist, was dem Browser sagt, er solle gefälligst irgendeine serifenlose Schriftart benutzen.
Schnell stößt man aber an die Grenzen dieser „Lösung“ und eigentlich behebt sie das Problem nicht. Deshalb gibt es noch andere Möglichkeiten.

Wer dennoch mit dieser Möglichkeit arbeiten will, der sollte sich unbedingt mal den Typetester ansehen, mit dessen Hilfe sich Schriftarten im Fließ- und Kontext ansehen und prüfen lassen.

2. Font-Replacement
ACHTUNG! Ganz zu Anfang: diese Methode sollte wirklich nur bei Überschriften eingesetzt werden, für Fließtext eignet sie sich nicht, weshalb die Technik meist auch Header-Replacement genannt wird.
Beim Font-Replacement erstellt man eine Grafik mit dem gewünschten Text in der gewünschten Schriftart. Diese setzt man aus Gründen der Barrierefreiheit aber natürlich nicht direkt per <img>-Tag in den HTML-Code ein. Nein! Im Gegenteil, man schreibt den Text ganz normal wie gewohnt.

Code:

<h1 id="header-foobar">Foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

Hier lässt sich nun einiges mit CSS machen. In diesem Falle soll die Überschrift durch die Grafik ersetzt werden.

Code:

#header-foobar {
    background: url('your-image.png') no-repeat;
    text-indent: -999em;
    height: 30px;
    width: 150px;
}

Zunächst wird die Grafik als Hintergrundgrafik angelegt. Danach wird der Text um -999em aus dem Bild geschoben. Welcher Wert nun genau genommen wird, ist egal. Hauptsache, die Schrift ist nicht mehr sichtbar. Der Text wird wirklich nur zur Seite geschoben und bleibt auf diese Weise noch markierbar, auch wenn dies natürlich bei weitem nicht so komfortabel ist, wie bei sichtbarem Text.
Die Höhe und die Breite schlussendlich müssen mit Höhe und Breite der Grafik übereinstimmen, sonst wird diese evtl. abgeschnitten.

2. @font-face
@font-face ist eine Regel zum Einbinden von Schriftarten unter Angabe deren URL (z.B. auf dem Server, aber auch Schriftarten, die lokal auf dem Benutzercomputer liegen, lassen sich einbinden). Allerdings wird diese Regel nur sehr mangelhaft bis gar nicht unterstützt und ist deshalb nicht im CSS 2.1-Standard enthalten, wird aber wahrscheinlich Teil der CSS 3-Spezifikation sein. Derzeit unterstützt nur der Safari ab Version 3.1 diese Regel und Firefox soll in Version 3.1 ebenfalls nachlegen.
Aber wie funktioniert dies denn nun?
Die Regel @font-face wird zunächst wie ein normaler CSS-Selektor behandelt:

Code:

@font-face {
    font-family: FontName;
    src: url('pfad/zur/datei.ttf') format('truetype');
}

Innerhalb von @font-face { … } können auch noch weitere bekannte Eigenschaften notiert werden, die sich auf die Schriftart beziehen, wie font-weight, font-variant etc.
font-family enthält den Namen der Schriftart und src den Pfad. Der Parameter format(…) ist optional (es existiert auch noch eine Handvoll weiterer Parameter) und gibt den Typ der Schriftart an, in diesem Falle TrueType; neben TrueType wird auch OpenType unterstützt.
Um nun diese Schriftart auf die Überschrift anzuwenden, muss man nur noch den soeben festgelegten Schriftnamen benutzen:

Code:

#header-foobar {
    font-family: FontName;
}

That's it!
Leider noch nicht salonfähig, aber das wird sicherlich noch. Einige wenige Browser unterstützen es ja bereits und optional kann man es sicherlich schon anbieten.

3. Links zum Thema
Und da dies nicht das einzige Tutorial zum Thema ist, hier noch einige Links:

• @font-face - MDC
• Web Fonts - @font-face im Einsatz
• 40+ Excellent Freefonts For Professional Design
• Open Font Library