Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 24. Juni 2013

Fontastic.me: Frische Web-App zum freien Zusammenstellen eigener Icon Fonts

Vincent Le Moign aka Webalys ist kein Unbekannter unter Webdesignern. Erst kürz­lich stell­ten wir Ihnen sein Projekt Agile Designers, ein Sammelbecken hoch­wer­ti­ger Design-Ressourcen vor. Darüber hin­aus erstellt und ver­treibt Webalys das Riesenset Minicons mit rund 1.500 ein­zel­nen Piktogrammen. Massenhaft Freebies säu­men sei­nen Weg. Heute stel­len wir Ihnen mit Fontastic.me Le Moigns Interpretation eines gelun­ge­nen Icon Font-Baukastens vor. Dieser ist nicht nur leis­tungs­fä­hig, son­dern zudem kos­ten­los…

fontastic-homepage

Icon Fonts und modernes Webdesign

Icon Fonts set­zen sich durch. Anstelle ein­zel­ner Grafiken oder Sprite-Sets mit meh­re­ren Grafiken in einer Datei wer­den zuneh­mend Icons in der Form von Schriftarten ein­ge­setzt. Diese erzeu­gen nicht für jedes Icon einen Request und müs­sen vor allem nicht für unter­schied­li­che Auflösungen in unter­schied­li­chen Varianten vor­ge­hal­ten wer­den. Die freie Skalierbarkeit der Icon Fonts prä­de­sti­niert sie für den immer wich­ti­ger wer­den Einsatz auf HiDPI-Geräten, wie dem Nexus 10 oder dem iPad5 oder der neu­en Riege von FullHD-Smartphones.

fontastic-select-1v3

Nun gibt es eine gan­ze Reihe unter­schied­li­cher, qua­li­ta­tiv hoch­wer­ti­ger Icon Fonts am Markt. Was aber, wenn man nur eini­ge weni­ge Icons aus einem Font mit 300 Zeichen ver­wen­den will oder ergän­zend noch eini­ge Symbole aus Font X, Y und Z ver­wen­den möch­te? In die­sen Fällen ist es sinn­voll, sich einen ange­pass­ten Icon Font zu kon­fek­tio­nie­ren, der ledig­lich die tat­säch­lich ver­wen­de­ten Piktogramme ent­hält.

Genau zu die­sem Zweck gibt es ein paar Dienste, denen sich jüngst ein wei­te­rer zur Seite stell­te. Mit Fontastic.me tritt ein neu­er Dienst an den Start, der sich als direk­ter Konkurrent zu Icomoon und Fontello posi­tio­niert.

Sowohl IcoMoon, wie auch Fontello stell­ten wir unse­ren Leserinnen und Lesern bereits ein­zeln vor. Die Links zu den ent­spre­chen­den Artikeln fin­den Sie wei­ter unten in den Links zum Beitrag. Nur kurz zur Einordnung sei in Erinnerung geru­fen, dass es sich bei IcoMoon um ein kom­mer­zi­el­les Angebot han­delt, das auch in der Lage ist, Icons als Grafikdateien zu lie­fern, wäh­rend Fontello ein frei­es Projekt ohne kom­mer­zi­el­len Hintergrund ist und via Github sogar als selbst­ge­hos­te­te Lösung ein­ge­setzt wer­den kann.

Fontastic.me kombiniert die Vorzüge von IcoMoon mit denen von Fontello

Von der Handhabung und in Ansätzen auch hin­sicht­lich des Designs wir­ken Fontastic.me und Fontello extrem ähn­lich. Fontastic.me inte­griert jedoch knapp 2.000 ein­zel­ne Icons, Fontello liegt deut­lich dar­un­ter. Genau wie IcoMoon ist Fontastic.me in der Lage, vom User hoch­zu­la­den­de SVG-Dateien in den eige­nen Icon Font zu inte­grie­ren. Fontello bie­tet die­se Möglichkeit nicht.

Wollen Sie sich einen eige­nen Font mit Fontastic zusam­men­stöp­seln, so bedarf es ledig­lich einer unkom­pli­zier­ten Registrierung mit Festlegung einer E-Mail-Adresse und eines Passworts. Danach wer­den Sie ohne Umschweife in den Font-Baukasten wei­ter­ge­lei­tet. Hier grei­fen Sie wie in IcoMoon und Fontello per Mausklick die gewünsch­ten Symbole auf, die dann unter einem frei zu ver­ge­ben­den Namen als Custom Icon Font gesam­melt wer­den.

fontastic-customize-2v3

Wie bei der Konkurrenz ist die Festlegung indi­vi­du­el­ler Unicode-Zeichen für die Ansprache der Piktogramme vor­ge­se­hen. Weiterhin las­sen sich die CSS-Klassen, die zur Ansteuerung der Icons über das CSS ver­wen­det wer­den kön­nen, anpas­sen.

Eine Besonderheit von Fontastic.me ist die Möglichkeit, Icons per Data-Attribut, als Alternative zur klas­sen­ba­sier­ten Ansteuerung, zu plat­zie­ren. Hierzu ver­gibt man einen Shortcut für jedes Zeichen und ruft das Icon ent­spre­chend bei­spiels­wei­se so auf:

Text neben Icon

Neben dem Import ein­zel­ner SVG-Dateien erlaubt Fontastic.me auch den Import kom­plet­ter SVG-Fonts. Der Dienst funk­tio­niert nahe­zu intui­tiv und kommt mit aus­führ­li­chen Erläuterungen zur Verfahrensweise daher, wes­halb er sich aus­ge­spro­chen gut für Designer eig­net, die sich dem Thema Icon Fonts eben erst nähern. Fontastic.me soll auf Dauer kos­ten­frei blei­ben. Hinsichtlich der Nutzungsrechte an den inte­grier­ten Icon Fonts muss man im Zweifel ein biss­chen auf­pas­sen. Nicht alle sind voll kom­mer­zi­ell ver­wend­bar, die Lizenzen sind jedoch pro­mi­nent genannt.

fontastic-download-3v3

Fontastic.me wird in mei­nem Umfeld auf­grund der erwei­ter­ten Möglichkeiten und der noch einen Tick kom­for­ta­ble­ren UI das bis­her favo­ri­sier­te Fontello ablö­sen. Was hal­ten Sie von dem Dienst?

Links zum Beitrag

  • Join the Icon Fonts Revolution | Fontastic.me
  • Agile Designers: Interessante Anlaufstelle für Design-Ressourcen | Dr. Web Magazin
  • Fontello: IcoMoon-Konkurrent hilft beim Zusammenstellen eige­ner Iconfonts | Dr. Web Magazin
  • IcoMoon: Hunderte Icons kos­ten­los als indi­vi­du­el­ler Webfont | Dr. Web Magazin
Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

5 Kommentare

  1. Schönes Ding wür­de ich sagen. Muss ich mir auf jeden Fall mal genau­er anschau­en. Danke für den guten Überblick.

  2. Ich habe bis­her immer IcoMoon genutzt wer­de aber mal Fontastic tes­ten. Den Einbau mit data-attri­but fin­de ich ganz sexy.

  3. Gut gelun­ge­ner Überblick, alle Infos auf den Punkt gebracht. Hat mich neu­gie­rig gemacht. Werde das Ganze gleich mal für mich selbst tes­ten. Danke ;)

  4. Danke für den Überblick – das sieht sehr viel­ver­spre­chend aus, wer­de ich mir gleich mal anse­hen (und aus­pro­bie­ren)!
    @Vincent: Great work, thanks for pro­vi­ding this – looks real­ly pro­mi­sing!

  5. Thanks a lot for the gre­at, and in-depth, review :-)

    I’m glad you like Fontastic that much, and that it beco­me your new favo­ri­te tool!
    We’ve worked hard to crea­te not only a gre­at tool, but a plea­sant inter­face. A tool that you have plea­su­re to use.

    We’ll make it even easier in the next weeks: icon search is com­ing soon, and we plan to have a CDN to deli­ver the icons, so you won’t have to download/install the font each time you make a chan­ge (it will be a pay­ing ser­vice though).

    Stay tun­ed!
    Vincent

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.