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

Vincent Le Moign aka Webalys ist kein Unbekannter unter Webdesignern. Erst kürzlich stellten wir Ihnen sein Projekt Agile Designers, ein Sammelbecken hochwertiger Design-Ressourcen vor. Darüber hinaus erstellt und vertreibt Webalys das Riesenset Minicons mit rund 1.500 einzelnen Piktogrammen. Massenhaft Freebies säumen seinen Weg. Heute stellen wir Ihnen mit Fontastic.me Le Moigns Interpretation eines gelungenen Icon Font-Baukastens vor. Dieser ist nicht nur leistungsfähig, sondern zudem kostenlos…

fontastic-homepage

Icon Fonts und modernes Webdesign

Icon Fonts setzen sich durch. Anstelle einzelner Grafiken oder Sprite-Sets mit mehreren Grafiken in einer Datei werden zunehmend Icons in der Form von Schriftarten eingesetzt. Diese erzeugen nicht für jedes Icon einen Request und müssen vor allem nicht für unterschiedliche Auflösungen in unterschiedlichen Varianten vorgehalten werden. Die freie Skalierbarkeit der Icon Fonts prädestiniert sie für den immer wichtiger werden Einsatz auf HiDPI-Geräten, wie dem Nexus 10 oder dem iPad5 oder der neuen Riege von FullHD-Smartphones.

fontastic-select-1v3

Nun gibt es eine ganze Reihe unterschiedlicher, qualitativ hochwertiger Icon Fonts am Markt. Was aber, wenn man nur einige wenige Icons aus einem Font mit 300 Zeichen verwenden will oder ergänzend noch einige Symbole aus Font X, Y und Z verwenden möchte? In diesen Fällen ist es sinnvoll, sich einen angepassten Icon Font zu konfektionieren, der lediglich die tatsächlich verwendeten Piktogramme enthält.

Genau zu diesem Zweck gibt es ein paar Dienste, denen sich jüngst ein weiterer zur Seite stellte. Mit Fontastic.me tritt ein neuer Dienst an den Start, der sich als direkter Konkurrent zu Icomoon und Fontello positioniert.

Sowohl IcoMoon, wie auch Fontello stellten wir unseren Leserinnen und Lesern bereits einzeln vor. Die Links zu den entsprechenden Artikeln finden Sie weiter unten in den Links zum Beitrag. Nur kurz zur Einordnung sei in Erinnerung gerufen, dass es sich bei IcoMoon um ein kommerzielles Angebot handelt, das auch in der Lage ist, Icons als Grafikdateien zu liefern, während Fontello ein freies Projekt ohne kommerziellen Hintergrund ist und via Github sogar als selbstgehostete Lösung eingesetzt werden kann.

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

Von der Handhabung und in Ansätzen auch hinsichtlich des Designs wirken Fontastic.me und Fontello extrem ähnlich. Fontastic.me integriert jedoch knapp 2.000 einzelne Icons, Fontello liegt deutlich darunter. Genau wie IcoMoon ist Fontastic.me in der Lage, vom User hochzuladende SVG-Dateien in den eigenen Icon Font zu integrieren. Fontello bietet diese Möglichkeit nicht.

Wollen Sie sich einen eigenen Font mit Fontastic zusammenstöpseln, so bedarf es lediglich einer unkomplizierten Registrierung mit Festlegung einer E-Mail-Adresse und eines Passworts. Danach werden Sie ohne Umschweife in den Font-Baukasten weitergeleitet. Hier greifen Sie wie in IcoMoon und Fontello per Mausklick die gewünschten Symbole auf, die dann unter einem frei zu vergebenden Namen als Custom Icon Font gesammelt werden.

fontastic-customize-2v3

Wie bei der Konkurrenz ist die Festlegung individueller Unicode-Zeichen für die Ansprache der Piktogramme vorgesehen. Weiterhin lassen sich die CSS-Klassen, die zur Ansteuerung der Icons über das CSS verwendet werden können, anpassen.

Eine Besonderheit von Fontastic.me ist die Möglichkeit, Icons per Data-Attribut, als Alternative zur klassenbasierten Ansteuerung, zu platzieren. Hierzu vergibt man einen Shortcut für jedes Zeichen und ruft das Icon entsprechend beispielsweise so auf:

1
<div class="icon" data-icon="g">Text neben Icon</div>

Neben dem Import einzelner SVG-Dateien erlaubt Fontastic.me auch den Import kompletter SVG-Fonts. Der Dienst funktioniert nahezu intuitiv und kommt mit ausführlichen Erläuterungen zur Verfahrensweise daher, weshalb er sich ausgesprochen gut für Designer eignet, die sich dem Thema Icon Fonts eben erst nähern. Fontastic.me soll auf Dauer kostenfrei bleiben. Hinsichtlich der Nutzungsrechte an den integrierten Icon Fonts muss man im Zweifel ein bisschen aufpassen. Nicht alle sind voll kommerziell verwendbar, die Lizenzen sind jedoch prominent genannt.

fontastic-download-3v3

Fontastic.me wird in meinem Umfeld aufgrund der erweiterten Möglichkeiten und der noch einen Tick komfortableren UI das bisher favorisierte Fontello ablösen. Was halten 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 eigener Iconfonts | Dr. Web Magazin
  • IcoMoon: Hunderte Icons kostenlos als individueller Webfont | Dr. Web Magazin

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. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Vincent Le Moign
Gast
3 Jahre 29 Tage her

Thanks a lot for the great, and in-depth, review :-)

I’m glad you like Fontastic that much, and that it become your new favorite tool!
We’ve worked hard to create not only a great tool, but a pleasant interface. A tool that you have pleasure to use.

We’ll make it even easier in the next weeks: icon search is coming soon, and we plan to have a CDN to deliver the icons, so you won’t have to download/install the font each time you make a change (it will be a paying service though).

Stay tuned!
Vincent

SiGa
Gast
3 Jahre 28 Tage her

Danke für den Überblick – das sieht sehr vielversprechend aus, werde ich mir gleich mal ansehen (und ausprobieren)!
@Vincent: Great work, thanks for providing this – looks really promising!

Andrea
Gast
3 Jahre 27 Tage her

Gut gelungener Überblick, alle Infos auf den Punkt gebracht. Hat mich neugierig gemacht. Werde das Ganze gleich mal für mich selbst testen. Danke ;)

Daniel
Gast
Daniel
3 Jahre 20 Tage her

Ich habe bisher immer IcoMoon genutzt werde aber mal Fontastic testen. Den Einbau mit data-attribut finde ich ganz sexy.

Alexander
Gast
3 Jahre 4 Tage her

Schönes Ding würde ich sagen. Muss ich mir auf jeden Fall mal genauer anschauen. Danke für den guten Überblick.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen