Iconfonts – mittlerweile recht beliebt, aber…

Iconfonts überzeugen durch die schnelle Verfügbarkeit neuer Icons, sind unbegrenzt skalierbar, die Symbole leicht auszutauschen. Sie eignen sich für technikaffine Webentwickler die mit Grafikprogrammen nichts am Hut haben, aber trotzdem nicht auf bildnerische Elemente verzichten wollen.

Unvermeidlich fanden Schrift-Icons Einzug in mein letztes größeres Themebaukasten-Update (Nachtrag: da blieben sie nicht lange, sondern wurden durch Vektorgrafiken ersetzt). Die vorher verwendeten Socialiconsprites behielt ich jedoch bei, da Font Awesome 4 Interent-Explorer 7 nicht mehr berücksichtigt, und ich bereits vor mehreren Jahren proklamiert hatte, diesen noch so lange einzubeziehen, bis Microsft Windows XP aufgibt (so weit ich weiß, ab April 2014). Wie sich herausstellte, brauche ich den Fallback aber längst nicht nur für den OldIE.

Wer schon so lange online ist wie ich kann sich bestimmt noch an die Zeit erinnern, in der es praktisch nur einen relevanten Browser gab. Vom Internet-Explorer war ich es seit Version 5.5 gewohnt, dass er @font-face unterstützt. Mobile Varianten (zumindest bis IE9) laden aber keine Schriften (@font-face funktioniert nur für unterstützte Schriften). – Und so bekam ich im mobilen Internet Explorer 9 nur Platzhalter zu sehen die einem sagen, dass die Position an der eigentlich ein Schriftzeichen-Icon wiedergegeben werden sein sollte, für diesen Browser leer ist.

Bei Recherchen stellte sich heraus, dass so breit wie manche in ihrer Begeisterung für Font-Icons vielleicht denken, das Einbinden von Schriften via @font-face gar nicht unterstützt wird (einer aktuellen Recherche zufolge sind mindestens 370 Millionen Geräte betroffen, die dann leer ausgehen). Ohne @font-face gibt es keine Font-Icons. Bei Buchstabenschriften ist das Fehlen der Unterstützung von @font-face kein offensichtliches Problem. Dafür gibt es immer einen Fallback in Form einer Ersatz- oder Standardschrift, die dann greift, wenn die unter font-family angeführten Alternativen nicht verfügbar sind.

Nicht immer ist jedoch ein Kompatibilitätsproblem die Ursache für das Fehlen der Icons. Um bei extern eingebundenen Schriften Icons an alle fähigen Browser zu übergeben, muss in der .htaccess Crossdomain-Einbindung (Access-Control-Allow-Origin) von Komponenten erlaubt sein. Firefox und Internet-Explorer weigern sich sonst, die Icons anzuzeigen.

Der Fallback für Iconfonts kann nur grafisch sein (SVG oder, wenn auch das nicht unterstützt wird, PNG), oder aus einer base64-URL bestehen (etwas in Verruf geraten, weil damit potentiell auch Schadecode eingeschleust werden könnte), und es ist bei der Vielzahl betroffener Schnittstellen zu den diese bedienenden Menschen eine Überlegung wert eine Alternative zu den Font-Icons vorzusehen. Hier geht es zu einem Fallback auf Github (nicht selbst getestet). Dieser Link hingegen führt zu den Recherche-Ergebnissen.