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)
Ersten Kommentar schreiben
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.

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Downloads zu diesem Beitrag

Newsletter abonnieren