Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
HTML und CSS Tipps
22.02.2015

Eigene Icon-Webfonts erstellen und einbinden

Webfonts bieten die Möglichkeit, Icons nicht als Bilder, sondern als Schriftzeichen einzubinden. Meist ist dies aber wiederum mit zusätzlichem Ladevolumen und zusätzlichen Requests verbunden. Insofern lohnt es sich, vor der Einbindung der Webfonts etwas intensiver nachzudenken.

Verwendung von Webfont-Icon-Sätzen

Als einfachste Methode, um Webfont Icons einzubinden, können Sie auf fertige CSS und Font-Dateien verlinken, die frei im Internet verfügbar sind (z.B. Font-Awesome). Font-Awesome Icons sind auch als CDN verfügbar, so dass sie parallel zu Ihrer Website geladen werden können.

Um beim Beispiel Font awesome zu bleiben, laden Sie dadurch eine zusätzliche CSS-Datei (21,5kB in minimierter Form) und eine Font-Datei (63,9kB) - unter der Annahme, dass Sie den Font als .woff Datei laden. D.h. es sind zwei zusätzliche Requests mit ca. 85 kB zusätzlichen Ladevolumen notwendig. Bei einer performanten mobilen Webseite, die üblicherweise ein Ladevolumen von maximal 100kB aufweist, bedeutet dies fast eine Verdoppelung des Ladevolumens – und dies alles nur für ein paar Webfont Icons!

Das Ladevolumen lässt sich zwar auf die altbewährte Weise verringern (GZip-Komprimierung, Browsercaching), doch der Umstand, dass Sie evtl. eine signifikante Anzahl Icons laden, die Sie nie verwenden werden, bleibt weiterhin bestehen.

Zusammenstellung eines individuellen Webfont-Icon-Satzes

Der aktuelle komplette Icon-Satz von Awesome beinhaltet über 500 Icons. Höchstwahrscheinlich werden Sie nur einen Bruchteil der Icon verwenden. Daher erscheint es als sinnvoll, nur die gewünschten Icons zu extrahieren und nur diese Icons einzubinden. Hierzu bietet sich ein Font-Generator, wie z.B. http://fontello.com/ an. Hier können Sie Ihren ganz individuellen Icon-Satz zusammenstellen und herunterladen. Die Zip-Datei, die Sie dabei herunterladen, enthält nicht nur die CSS-Datei und die Font-Dateien für die verschiedenen Browser (.eof, .ttf, .woff, .svg), sondern auch eine Config-Datei als .json, in der Ihre aktuelle Icon-Zusammenstellung hinterlegt ist. Falls Sie zu Ihrem Icon-Satz ein zusätzliches Icon benötigen, können Sie diese Config-Datei einfach wieder hochladen und auf Ihren vorhandenen Icon-Satz aufsetzen. Sie müssen sich somit nicht alle Icons wieder neu zusammenstellen.

Unter der Annahme, dass Sie nur ca. 10 Icons verwenden, ergibt sich somit eine CSS-Datei, die ca. 2kB groß ist und ein zusätzlicher Webfont (.woff) mit ca. 3,7kB. Es ist naheliegend, dass Sie die wenigen CSS-Anweisungen nicht über eine separate Datei laden, sondern in Ihre vorhandene CSS-Datei integrieren. Wenn Sie nur wenige Icons verwenden, wäre es auch eine Überlegung wert, den Font als embedded Font (Base64 codiert) direkt in der Css-Datei zu integrieren. Dies bietet sich für die Font als .ttf und .woff an. Sie werden auch von den aktuell am meisten verbreiteten Browsern (Firefox, Chrome) bevorzugt geladen. Diese Empfehlung gilt aber wirklich nur, falls Sie sehr wenige Icons verwenden, da sonst die CSS-Datei stark aufgebläht wird.

Fazit

Mit einigen Überlegungen ist es möglich, Icon-Webfonts zu verwenden, ohne das Ladevolumen und die Anzahl der Requests signifikant zu erhöhen. Unter der Annahme, dass Icons, die früher als Bild geladen wurden, jetzt weg fallen oder das CSS-Sprite, welches die Icons einhielt, verkleinert werden kann, ist die Umstellung auf Webfont Icons fasst ein Nullsummenspiel. Als Vorteil haben Sie danach ohne Qualitätsverlust skalierbare Icons.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

86

Kommentare:

28.Februar2015

Sehr interessanter Artikel, vielen Dank! smile Freue mich auf mehr.

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.