Im Webdesign werden viele kleine Icons verwendet. Sie müssen umständlich eingebunden werden und kosten den Entwickler viel Zeit beim anpassen. Wenn ein Image für einen Button gezeichnet werden soll muss dieser in unterschiedlichen Farbstufen vorliegen. Eine Font zu verwenden in der all diese Icons als Buchstabe oder Zahl hinterlegt sind wäre die elegante Lösung.

Vorteile

  • Bilder im Fließtext möglich (durch <span> Umgebung)
  • unterschiedliche Farben
  • einfach konfiguriert
  • alle wichtigen Bilder in einer Font

Nachteile

  • Unterstützung alter Webbrowser

Ich habe mal eine Font mit FontLab Studio erstellt und dabei häufig vorkommende Icons verwendet.

A B C D E F G H I J K L M
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
a b c d e f g h i j k l m
n o p q r s t u v w x y z
n o p q r s t u v w x y z

Ein minimal Beispiel könnte wie folgt aussehen: Html Dokument (speichern unter index.html):

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
Das ist normaler Text, mit <span class="font_maja">l</span> einem Bild.
</body>
</html>

CSS Dokument (speichern unter style.css):

@font-face {
   font-family: 'font_maja';
   src: url(font_maja.eot);
   src: url('font_maja?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
      url('font_maja.woff') format('woff'),	/* Moderne Browser */
      url('font_maja.ttf') format('truetype'),	/* Safari, Android, iOS */
      url('font_maja.svg#svgFontName') format('svg'); /* Ältere iOS-Geräte */
}
.font_maja { font-family: "font_maja"; }

Für den Fall-back für ältere Browser müssen unterschiedliche Formate bereitgestellt werden und dem Browser die möglichkeit gegeben werden sein Format auszuwählen.

Jetzt fehlen nur noch die Fonts unter dem Namen font_maja.ttf, im gleichen Ordner abzuspeichern, Fertig!.

Es gibt noch Kleinigkeiten die Optimiert werden könnten:

  • WOFF als Export (nicht gefunden unter FontLab Studio)
  • Restliche ASCII mit Icons befüllen
  • Font für andere Zwecke erstellen (z.B.: Muster, Elektrische Symbole, ..)

Nachtrag

Icomoon scheint schon so etwas professioneller zu machen: icomoon