Zu Inhalt springen

Aus mehreren SVG-Dateien einen (Icon-)Font selber erzeugen

Hervorgehobene Antworten

Moin.
Ich bin mir nicht sicher, welche Rubrik unterhalb der Rubrik Technik am besten passt. Falls es nicht diese ist, bitte ich den Moderator zu verschieben.

Ich möchte gerne einen Icon-Font selber erzeugen.
Als Quelle sollen verschiedene SVG-Dateien dienen. Sie können verschieden groß sein. Sie können farbig oder monochrom sein.

Das Zielformat am Ende ist WOFF.

Da dieses Format jedoch nicht zum Editieren gedacht ist, soll es also um die Erzeugung eines Fonts als TTF oder OTF gehen.

Ich arbeite auf macOS.

Verstehe ich es richtig, dass ich folgende Teilaufgaben lösen muss?

Normalisierung der Größen aller SVGs.
Entfernung von Farbe.
Festlegen von HTML-Entities.

Ihr merkt schon an der Art der Fragen, dass ich unerfahren mit Techniken zur Bearbeitung von Glyphen und Fonts bin.

Ein Online-Tool, welches bei der Recherche auftauchte: https://icomoon.io

Welches kostenlose Tool (oder auch Kette von kostenlosen Tools) könnt ihr für so eine Aufgabe empfehlen?

Worauf muss ich achten?

Kann ich mit dem Tool auch bei einem vorhandenen Icon-Font weitere Glyphen hinzufügen, wenn die Vektorgrafiken, wie oben erwähnt, als SVG vorliegen?

Danke für euren Rat : )

Wirklich sauber geht sowas nur in einem echten Fonteditor. Für den leichten Einstieg am Mac könnte man sich Glyphs Mini anschauen: https://glyphsapp.com/buy

Kostet zumindest nicht viel. Kostenlos wäre FontForge, aber bezogen auf Bedienbarkeit und Lernkurve würde ich das nicht wirklich empfehlen. 

Der Prozess ist ansonsten nicht schwer. Die Vektorgraphen importieren und skalieren (zum Beispiel auf Versalhöhe). Die Glyphen-Ansprache wird in der Regel über den Unicode-Wert definiert. Etwas unsauber wäre das Ablegen auf herkömmlichen Buchstaben. Alternativ bedient man sich vorhandener Unicode-Werte für Symbole oder verschiebt alles in den Bereich zur privaten Verwendung.

Das ist ein Beispiel aus Glyphs (Vollversion):

Bildschirmfoto 2025-10-27 um 11.21.31.png

Da sage ich: Befehl + Umschalt + g (für neue Glyphen) und gebe dann »uniE02F uniE030 uniE031 …« usw. ein. Die korrekt kodierten Glyphen werden dann angelegt. Eventuell ist das aber in der Mini-Version eingeschränkt. 

Bisschen einlesen müsste man sich in die Vektorverarbeitung in Fonteditoren. Da gibt es ja die TrueType-Kurven und die PostScript-Kurven und man sollte da wissen, was man tut und kann nicht ganz so frei arbeiten wie in einem herkömmlichen Vektorprogramm. 

  • Ersteller

@Ralf Herrmann
Herzlichen Dank für deine Hinweise und Empfehlungen.

Liest jemand mit, der das von mir erwähnte https://icomoon.io schonmal verwendet hat und es bewerten kann?

Kommen da "saubere" Fonts raus oder sollte man die Finger davon lassen?

Die Bedienoberfläche macht jedenfalls einen einfach bedienbaren Eindruck. 

Wenn man ein SVG mit "Strokes" hinzufügt, erhält man eine Meldung, siehe Anhang.

Eine automatische Umwandlung wird nicht angeboten. 

Hätte nicht erwartet, dass die SVG-Eigenschaft "stroke-width" für Glyphen nicht sinnvoll umgesetzt werden kann. 
 

Bildschirmfoto 2025-10-28 um 09.00.24.png

Erstelle ein Konto, um zu kommentieren

Wichtige Informationen

Wir setzen Cookies, um die Benutzung der Seite zu verbessern. Du kannst die zugehörigen Einstellungen jederzeit anpassen. Ansonsten akzeptiere bitte diese Nutzung.

Konto

Navigation

Browser-Push-Nachrichten konfigurieren

Chrome (Android)
  1. Klicke das Schloss-Symbol neben der Adressleiste.
  2. Klicke Berechtigungen → Benachrichtigungen.
  3. Passe die Einstellungen nach deinen Wünschen an.
Chrome (Desktop)
  1. Klicke das Schloss-Symbol in der Adresszeile.
  2. Klicke Seiteneinstellungen.
  3. Finde Benachrichtigungen und passe sie nach deinen Wünschen an.