Webdesign: Freie Icon-Bibliotheken für @font-face

Die folgende Übersicht zeigt eine Vielzahl an Icon-Bibliotheken unter freier Lizenz, die mittels @font-face im Webdesign eingesetzt werden können. Alle Schriften dieser Auswahl können bei kommerziellen Projekten eingesetzt werden. Jedoch sollte beim Herunterladen die jeweilige Lizenz nochmals überprüft werden, da sich diese bei neuen Versionen ändern kann.

NameAnzahl der IconsLizenz
Font Awesome479OFL
IconMoon Limited450CC-BY oder GPL
Typicons336OFL
Foundation Icons283MIT-License (laut CSS-Datei im Downloadpaket)
entypo250+CC-BY-SA
Open Iconic223/OFL
Sosa160+Frei für kommerzielle und private Nutzung
Heydon Pickering Fonts (zwei Schriftarten)116OFL
Raphaël Icon-Set110+MIT License
Genericons110+GPL 2
Modern Pictograms102OFL
Just Vector100+Free Art License

Firefox Webfonts: @font-face Problem bei absoluten URLs

Seit kurzem scheint der Browser Mozilla Firefox Probleme beim Einsatz der @font-face-Technik zu machen. Grund scheint eine Sicherheitseinstellung im Firefox zu sein, die es verbietet auf absolute URLs zugreifen zu können, wenn sich diese scheinbar außerhalb der aktuellen Seitenstruktur befinden. Das Problem tritt zum Beispiel auf, wenn gerade auf eine Seite https://domain.tld/xyz/ zugegriffen wird und im CSS http://domain.tld/xyz/webfont verlinkt ist. Zwei Lösungsmöglichkeiten hatten Erfolg:

  • absolute durch relative URLs ersetzen, also z.B. /xyz/webfont im CSS angeben statt http://domain.tld/xyz/webfont
  • das http: vor dem // weglassen und damit den Browser den entsprechenden Präfix https oder http selbst setzen lassen

Im Artikel Solution: Firefox Font-Face Cross Domain Problem wird außerdem erklärt, wie man dem Problem mit Hilfe von .htaccess zu Leibe rücken kann.