Eigene Icon- und Webfonts auf dem Mac aus SVG erstellen

Ob Designsystem, eigene Icon-Bibliothek oder unverwechselbare Webidentität: Vorgefertigte Fonts reichen nicht immer aus. Mit WebFont kannst du SVG-Grafiken in produktionsfertige Fonts umwandeln, ohne Dateien in eine Cloud hochzuladen.

Warum eigene Fonts?

Markenidentität: Eigene Glyphen geben einem Produkt eine unverwechselbare Stimme.
Leistung: Icon-Fonts sind kompakt, cachebar und schnell auszuliefern.
Skalierbarkeit: Glyphen bleiben in jeder Größe scharf und übernehmen CSS-Eigenschaften wie Farbe und Schatten.

Eigene Fonts mit WebFont erstellen

1. SVG-Grafiken vorbereiten

Exportiere Icons aus Illustrator, Figma oder Sketch als SVG mit Umrissen. WebFont kann eine SVG-Vorlage mit Grundlinien- und Begrenzungshilfen exportieren.

2. SVGs Unicode zuordnen

Importiere die SVGs im Font Builder. Für reine Icon-Fonts bietet sich der Private-Use-Area-Bereich an. Du kannst auch einen statischen TrueType-Quellfont importieren und Glyphen hinzufügen oder ersetzen.

3. Preflight Check ausführen

Vor dem Export erkennt WebFont Unicode-Konflikte, leere Pfade, ungewöhnliche Abmessungen und nicht unterstützte Funktionen wie Rasterbilder oder CSS-Filter.

4. Produktionsfonts exportieren

Exportiere TTF, WOFF oder WOFF2. Das Webpaket enthält zusätzlich @font-face-CSS, demo.html, metadata.json und HTML-Snippets.

Lokal mit Fonts arbeiten

Speichere .webfontproject-Dateien mit eingebetteten Fontdaten und Build-Einstellungen, um sie später weiterzubearbeiten. WebFont für macOS laden.