HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 151

lung im Allgemeinen erscheint sauberer und klarer. Zum anderen kann eine Schriftart
die Funktionalität oder den Charakter Ihrer WebApp unterstützen. Denken Sie an eine
Notiz-App, bei der die Notizen in einer Schreibschrift auf gelbe Notizzettel geschrieben
werden. Die WebApp hat somit nicht nur die Funktionalität eines Notizblocks, sondern
»fühlt« sich auch so an. Des Weiteren erhöht eine individuelle Schrift die Einzigartigkeit
Ihrer WebApp und setzt sie von der Konkurrenz ab. Im Extremfall wird sie sofort mit
Ihrer WebApp assoziiert, selbst ohne Logo oder Hinweistext (Abbildung 4.15).

4

Abbildung 4.15 Impressionen der Mercedes-Benz-WebApp auf dem iPhone und
unter Android. Auch hier stellt die Schrift wieder die Verbindung zur Marke her.

4.2.2 Webfonts

Seit 2010 wurden die Möglichkeiten rund um Webschriften, auch Webfonts genannt,
erheblich erweitert. Mit Webfonts bezeichnet man Schriften, die nicht als System-
schrift auf dem Computer des Benutzers installiert sind, jedoch trotzdem für die Dar-
stellung verwendet werden können. Der Browser lädt dabei die entsprechenden
Schriftdateien in den Browsercache. Zuvor war für den Einsatz von alternativen
Schriften Adobe Flash in Form des Scripts sIFR oder komplexes JavaScript mithilfe
des Plugins Cufon nötig. Flash wird jedoch nicht von mobilen Endgeräten unterstützt
und die komplexen JavaScripts wirken sich negativ auf die Performance aus. Insofern
keine befriedigende Lösung für den Einsatz in Ihren WebApps.

Aktuell haben Sie zwei Möglichkeiten, Webfonts in Ihrer WebApp einzusetzen. Die
erste Möglichkeit besteht darin, die Schriftart über die CSS-Eigenschaft @font-face
einzubinden.