Schriften auf Webseiten einbinden, ein Dauerthema

Der Buchstabe RSchrift im Web – ein Thema, um das es immer wieder geht. Waren in den 90er Jahren Grafiken für die Überschriften noch Stand der Technik, habe ich selbst seit Jahren von ihnen abgeraten. Und die seltsame Flash-Lösung (sIFR Font) konnte sich nie richtig durchsetzen – zu viele Probleme handelte man sich damit ein, und die Lösung hatte immer das Flair eines Hacks.

Ich fühle mich immer am wohlsten mit Lösungen, die einfach sind und ohne Tricks funktionieren. Leider ist das mit Schriften im Browser derzeit noch nicht so einfach möglich. Mein Ansatz ist, möglichst aus den aktuellen Standards das Beste herauszuholen, damit fährt man langfristig am Besten. Daher würde ich für 98 Prozent aller Sites raten, mit den Schriften zu arbeiten, die auf praktisch jedem Computer installiert sind (siehe Newsletter 10/2009 – Die richtige Schrift für meine Website).

CSS für die Einbindung von Schriftarten

Wenn die Schrift aber extrem wichtig ist, dann kann man mit @font-face arbeiten. Das ist eine CSS-Regel, die es erlaubt, Schriftarten zu verwenden, die nicht auf dem Computer des Benutzers installiert sind. Der Trick ist, dass die benötigte Schriftart von einem Server geladen wird. Das kann der Server sein, auf dem die HTML-Seite liegt. In den meisten Fällen ist es aber der Server eines Dienstleisters, der die Schriften sozusagen vermietet.

Allerdings sollte man sich bewusst sein, dass man sich in die Abhängigkeit des Schriften-Providers begibt und dass man, wenn neue Browser-Generationen erscheinen, seinen Html-Code eventuell nachbessern muss. Unbedingt sollte man auf Kompatibilität für alle Browser achten. Wie das geht, ist hier gut beschrieben: The Essential Guide to @font-face

Außerdem noch eine Empfehlung für den Blogeintrag Implementing @font-face von Milton Bayer. Darin finden sich viele Praxisbeispiele.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Weiterlesen bei benutzerfreun.de: