CSS3: So erstellen Sie eigene Webfonts - zum Beispiel mit Ihrer Handschrift

Im Printbereich gibt es unzählige Schriften. Für Webseiten war die Auswahl an Standardschriften lange Zeit stark eingeschränkt – doch mit der Einführung von CSS3 steht nun auch einer individuellen und kreativen Webtypographie nichts mehr im Wege.

Für die Darstellung der Schrift wird in CSS die Eigenschaft font-family verwendet. Der Browser greift zur Darstellung von Schriften auf die installierten Standardschriftsysteme des Betriebssystems zurück. Die Standardschriftarten unterscheiden sich jedoch erheblich von Betriebssystem zu Betriebssystem. Was bei Windows Arial ist, heißt bei Apple (Mac) Helvetica. Und für viele der Betriebssystem-spezifischen Schriften, wie z.B. Comic Sans MS, existieren keinerlei Entsprechungen auf anderen Betriebssystemen, wodurch die Auswahl geeigneter Schriftarten auf Webseiten äußerst begrenzt ist. Um dennoch systemübergreifend beispielsweise eine serifenlose Schrift darstellen zu können, verwendet man in CSS Fallback-Lösungen.

Dieser CSS-Befehl besagt, das sämtlicher Text im body des HTML-Dokuments (also alles) in einer serifenlosen Schriftart dargestellt werden soll. Dabei prüft der Browser zunächst, ob die Schriftart Verdana zur Verfügung steht. Ist dies nicht der Fall, wird geprüft, ob Arial bzw. Helvetica vorhanden ist. Ist keine der angegebenen Schriftarten auf dem PC-System vorhanden, so wird eine serifenlose Standardschrift zur Darstellung des Textes verwendet. Das heißt, der Browser prüft von links nach rechts das Vorhandensein der angegebenen Schriftarten.

Mit CSS3 wurde die @font-face-Eigenschaft eingeführt. Mit dieser CSS-Regel ist es nun möglich, eigene, systemfremde Schriften in eine Webseite einzubinden. Dort, wo man früher auf Grafiken – z.B. für Überschriften mit exotischen Schriftarten – zurückgreifen musste, lassen sich nun echte Schriften einsetzen. Das bringt Vorteile hinsichtlich der Zugänglichkeit (Barrierefreiheit) von Webseiten und hilft natürlich auch bei der Suchmaschinenoptimierung, da nun die Keywords in der Überschrift nicht länger unsichtbar für den Such-Robot in einer Bilddatei stecken, sondern direkt indiziert werden können. Außerdem sind echte Schriften skalierbar, d.h. auch bei starker Vergrößerung (Zoom) scharf und nicht verpixelt.