Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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 die­ser Dienste, der mich aus dem Stand über­zeug­te. Er ist sehr ein­fach zu bedie­nen, arbei­tet kom­plett feh­ler­frei, sieht schick aus und hält auch ansons­ten alle sei­ner Versprechen. Noch dazu ist er kos­ten­los nutz­bar. Was könn­te man mehr wol­len? Lesen Sie wei­ter und sehen Sie, wie Sie Ihren eige­nen Icon Font aus belie­bi­gen SVGs erzeu­gen und das in einer Zeit, in der eine Senseo eine Tasse Kaffee brüht.

glyphr_prefilled_icons

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

Glyphter sieht auf den ers­ten Blick aus wie eine an Kinder gerich­te­te Kreation aus dem Hause Disney. Lebendige Farben, gro­ße Schrift, ein­fa­che Formen, ein knud­de­li­ges Maskottchen – alles da für klei­ne Prinzen und Prinzessinnen…

Und ich muss zuge­ben, ich bin bei sol­chen ein­fa­chen Interfaces stets skep­tisch. Zu oft muss­te ich schon erle­ben, dass sich die­se Einfachheit auch im Featureset und dem übri­gen Gesamtbild nie­der­schlägt. Häufig wird eine zu ein­fa­che UI der Komplexität des Featureset auch nicht gerecht, so dass sich der ver­meint­li­che Vorteil ins Gegenteil ver­kehrt. Aber, dass muss ich ein­räu­men, das gilt alles nicht für Glyphter. Die UI passt per­fekt zum Featureset. Eine Dokumentation oder auch nur eine kur­ze Einleitung ist gar nicht erfor­der­lich.

Haben Sie Glyphter geöff­net, haben Sie im Wesentlichen zwei Wahlmöglichkeiten. Entweder kli­cken Sie das gro­ße Buch-Icon an der rech­ten unte­ren Ecke des Browserfensters. Auf die­se Weise öff­nen Sie eine Palette der popu­lärs­ten Icon Fonts. Etwa ein hal­bes Dutzend Schriften der Kaliber Linecons, Font Awesome, Entypo und eini­ge ande­re ste­hen bereit. Wählen Sie ein Icon aus und zie­hen es mit gedrück­ter Maustaste auf die Mitte des Browserfensters, wo ein röt­li­ches Grid dar­auf war­tet, mit Icons befüllt zu wer­den. Legen Sie das gewähl­te Icon in einem der lee­ren Quadrate ab.

Oder kli­cken Sie ein lee­res Quadrat direkt an. Auf die­se Weise öff­nen Sie den Öffnen-Dialog Ihres loka­len Dateisystems. Jetzt bewe­gen Sie sich zu dem gewünsch­ten SVG-File, wäh­len es per Klick aus und bestä­ti­gen den Button “Öffnen”. Ebenso funk­tio­niert es, wenn Sie ein SVG mit der Maustaste aus einem Verzeichnis auf das Grid zie­hen und auf einem lee­ren Quadrat los las­sen. Diese Methode führt zum sel­ben Ergebnis, ist aber viel schnel­ler, jedoch nahe­lie­gen­der­wei­se nur für grö­ße­re Auflösungen geeig­net, in denen man zumeist eh nicht mit dem Browser in vol­ler Bildschirmauflösung unter­wegs ist.

Ist das Symbol aus dem gewähl­ten Icon Font oder dem über­ge­be­nen SVG dann gela­den, zeigt es sich als klei­ne Preview inner­halb des vor­mals lee­ren Quadrats. Hovern Sie mit der Maus über die Preview, erschei­nen ver­schie­de­nen wei­te­re Symbole. Mit einem Klick auf das sicht­bar wer­den­de X löschen Sie das Icon wie­der, wäh­rend das Stift-Symbol einen Editor auf der lin­ken Seite des Browserfesters öff­net.

glyphr_edit_fonticon

Der Editor erlaubt Ihnen den Zugriff auf jeden ein­zel­nen Pfad inner­halb des SVG. Eine Reihe per Schaltfläche erreich­ba­rer Befehle bie­tet viel­fäl­ti­ge Manipulationsmöglichkeiten. So kön­nen Sie Pfade löschen, bewe­gen, spie­geln, rotie­ren und ska­lie­ren. Auf die­se Weise ver­än­dern Sie die Piktogramme bis zur Unkenntlichkeit, wenn Sie mögen.

glypher_edit_svg

Haben Sie Ihre Icons dann schluss­end­lich auf dem Grid ver­teilt und – nicht not­wen­di­ger­wei­se – bear­bei­tet, geben Sie Ihrem Font einen Namen, kli­cken auf “Download Font” und war­ten Sie auf den Download, der als TTF, also im True Type Format erfolgt. Vor dem Download wird Ihnen ange­bo­ten, einen Account anzu­le­gen, was Sie nicht tun müs­sen. Tun Sie es aber, wer­den Ihre Fonts auf der Plattform gespei­chert und kön­nen so immer wie­der von Ihnen bear­bei­tet wer­den, ohne dass Sie jedes­mal von vorn begin­nen müs­sen. Interessiert Sie die­se Option nicht, kli­cken Sie “Just Download” und Ihr TTF soll­te sich unver­züg­lich auf den Weg zu Ihnen machen.

Glyphter.com kann kom­plett kos­ten­los ver­wen­det wer­den.

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 über­zeugt das Tool lei­der kei­nes­falls saus dem Stand. Neun Icon-Fonts sind dort hin­ter­legt und die Suche spuckt jeweils nur ein ein­zi­ges Mail-, oder Telefon-Icon aus? Nette Idee, aber wie soll man damit im Alltag arbei­ten?

  2. ..schön und gut..das ist alles recht offen­sicht­lich. Spannender wäre eine Anleitung wie es in HTML ein­ge­bun­den wird.
    Gruss

Schreibe einen Kommentar zu Jens Antworten abbrechen

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