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

Dank CSS3 Gestaltungsfreiheit für echte Schriftarten: So gestalten Sie Ihre individuelle Webtypographie

5
(3)
Stand: 4. Juni 2014

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.

Standardschriften mit font-family

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.

Ein Beispiel:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

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.

Verdana, Arial, Helvetica

Verdana ist eine serifenlose Linear-Antiqua-Schrift, die im Hinblick auf eine optimale Bildschirmdarstellung bei kleinen Schriftgrößen von dem Schriftdesigner Matthew Carter für Microsoft 1996 entwickelt wurde. Arial ist die serifenlose Standardschriftart auf Windows-Systemen; Helvetica das Arial-Gegenstück auf Mac OS.

Webfonts mit @font-face einbetten

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.

Mit der @font-face-Technik wird eine Schriftart – ähnlich wie ein Bild – in der Webseite verlinkt. Die @font-face-Regel dient zur Festlegung der individuellen Schrift. Dabei wird die Schriftdatei über das Attribut src relativ verlinkt. Zuvor gibt man der Schrift einen Namen, über den man die Schrift auf beliebige HTML-Selektoren (z.B. p, h1 etc.) anwenden kann.

Schrift mit @font-face

@font-face {

font-family: 'Action_Man';

src: url('fonts/Action_Man.ttf');

}

Im Beispiel erhält die Schrift den Namen „Action_Man“ und befindet sich im Ordner fonts. Der Dateiname ist Action_Man.ttf. Die Datei muss auf den Webserver in das Verzeichnis fonts kopiert werden.

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

Downloads zu diesem Beitrag

Newsletter abonnieren