Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 11. April 2014

Glyphter: Mit dieser kostenlosen Web-App bauen Sie im Handumdrehen Ihren eigenen Icon Font aus beliebigen SVGs

Glyphter.com ist einer dieser Dienste, der mich aus dem Stand überzeugte. Er ist sehr einfach zu bedienen, arbeitet komplett fehlerfrei, sieht schick aus und hält auch ansonsten alle seiner Versprechen. Noch dazu ist er kostenlos nutzbar. Was könnte man mehr wollen? Lesen Sie weiter und sehen Sie, wie Sie Ihren eigenen Icon Font aus beliebigen SVGs erzeugen und das in einer Zeit, in der eine Senseo eine Tasse Kaffee brüht.

Anzeige

glyphr_prefilled_icons

Glyphter arbeitet mit jeder SVG und unterstützt bekannte Icon Fonts

Glyphter sieht auf den ersten Blick aus wie eine an Kinder gerichtete Kreation aus dem Hause Disney. Lebendige Farben, große Schrift, einfache Formen, ein knuddeliges Maskottchen – alles da für kleine Prinzen und Prinzessinnen…

Und ich muss zugeben, ich bin bei solchen einfachen Interfaces stets skeptisch. Zu oft musste ich schon erleben, dass sich diese Einfachheit auch im Featureset und dem übrigen Gesamtbild niederschlägt. Häufig wird eine zu einfache UI der Komplexität des Featureset auch nicht gerecht, so dass sich der vermeintliche Vorteil ins Gegenteil verkehrt. Aber, dass muss ich einräumen, das gilt alles nicht für Glyphter. Die UI passt perfekt zum Featureset. Eine Dokumentation oder auch nur eine kurze Einleitung ist gar nicht erforderlich.

Haben Sie Glyphter geöffnet, haben Sie im Wesentlichen zwei Wahlmöglichkeiten. Entweder klicken Sie das große Buch-Icon an der rechten unteren Ecke des Browserfensters. Auf diese Weise öffnen Sie eine Palette der populärsten Icon Fonts. Etwa ein halbes Dutzend Schriften der Kaliber Linecons, Font Awesome, Entypo und einige andere stehen bereit. Wählen Sie ein Icon aus und ziehen es mit gedrückter Maustaste auf die Mitte des Browserfensters, wo ein rötliches Grid darauf wartet, mit Icons befüllt zu werden. Legen Sie das gewählte Icon in einem der leeren Quadrate ab.

Oder klicken Sie ein leeres Quadrat direkt an. Auf diese Weise öffnen Sie den Öffnen-Dialog Ihres lokalen Dateisystems. Jetzt bewegen Sie sich zu dem gewünschten SVG-File, wählen es per Klick aus und bestätigen den Button "Öffnen". Ebenso funktioniert es, wenn Sie ein SVG mit der Maustaste aus einem Verzeichnis auf das Grid ziehen und auf einem leeren Quadrat los lassen. Diese Methode führt zum selben Ergebnis, ist aber viel schneller, jedoch naheliegenderweise nur für größere Auflösungen geeignet, in denen man zumeist eh nicht mit dem Browser in voller Bildschirmauflösung unterwegs ist.

Ist das Symbol aus dem gewählten Icon Font oder dem übergebenen SVG dann geladen, zeigt es sich als kleine Preview innerhalb des vormals leeren Quadrats. Hovern Sie mit der Maus über die Preview, erscheinen verschiedenen weitere Symbole. Mit einem Klick auf das sichtbar werdende X löschen Sie das Icon wieder, während das Stift-Symbol einen Editor auf der linken Seite des Browserfesters öffnet.

glyphr_edit_fonticon

Der Editor erlaubt Ihnen den Zugriff auf jeden einzelnen Pfad innerhalb des SVG. Eine Reihe per Schaltfläche erreichbarer Befehle bietet vielfältige Manipulationsmöglichkeiten. So können Sie Pfade löschen, bewegen, spiegeln, rotieren und skalieren. Auf diese Weise verändern Sie die Piktogramme bis zur Unkenntlichkeit, wenn Sie mögen.

glypher_edit_svg

Haben Sie Ihre Icons dann schlussendlich auf dem Grid verteilt und – nicht notwendigerweise – bearbeitet, geben Sie Ihrem Font einen Namen, klicken auf “Download Font” und warten Sie auf den Download, der als TTF, also im True Type Format erfolgt. Vor dem Download wird Ihnen angeboten, einen Account anzulegen, was Sie nicht tun müssen. Tun Sie es aber, werden Ihre Fonts auf der Plattform gespeichert und können so immer wieder von Ihnen bearbeitet werden, ohne dass Sie jedesmal von vorn beginnen müssen. Interessiert Sie diese Option nicht, klicken Sie “Just Download” und Ihr TTF sollte sich unverzüglich auf den Weg zu Ihnen machen.

Glyphter.com kann komplett kostenlos verwendet werden.

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.

3 Kommentare

  1. Mich überzeugt das Tool leider keinesfalls saus dem Stand. Neun Icon-Fonts sind dort hinterlegt und die Suche spuckt jeweils nur ein einziges Mail-, oder Telefon-Icon aus? Nette Idee, aber wie soll man damit im Alltag arbeiten?

  2. ..schön und gut..das ist alles recht offensichtlich. Spannender wäre eine Anleitung wie es in HTML eingebunden wird.
    Gruss

Schreibe einen Kommentar zu Jens Antworten abbrechen

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