Font Builder

Erstelle einfarbige oder farbige Icon- und Webfonts aus umrandeten SVG-Grafiken oder füge Glyphen in einem statischen TrueType-Quellfont hinzu und ersetze sie.

Font Builder ist für vorhersehbare Fontproduktion aus sauberen Vektorgrafiken ausgelegt. Nicht unterstützte SVG- und Fontfunktionen werden abgelehnt, statt still verändert zu werden.

Einen neuen Font aus SVG erstellen

1. Öffne Font Builder.
2. Ziehe umrandete SVG-Dateien in die Glyphenliste.
3. Prüfe Glyphennamen und Unicode-Werte.
4. Führe den Preflight Check aus.
5. Exportiere TTF, WOFF, WOFF2 oder ein vollständiges Webpaket mit CSS, Demo-HTML und metadata.json.

Glyphen in einem Quellfont hinzufügen oder ersetzen

Font Builder kann einen statischen TrueType-Quellfont importieren.

• Füge SVG-Glyphen zum Quellfont hinzu.
• Ersetze vorhandene Unicode-Glyphen durch SVG-Grafiken.
• Wähle mit „Glyphen durchsuchen“ Ersetzungsziele aus dem Quellfont.
• Halte Ersatz-Glyphen-IDs beim Bearbeiten stabil.
• Speichere den Vorgang als .webfontproject, wenn du später fortfahren möchtest.

SVG-Anforderungen

Font Builder erwartet statische SVG-Grafiken mit Umrissen. Unterstützte Grafiken sollten vor dem Import reduziert werden. Nicht unterstützt werden Live-SVG-Text, Rasterbilder, Filter, Masken, Clipping-Pfade, Skripte, Animationen, Video, Audio, Iframes und externe Ressourcen.

SVG-Vorlage

Exportiere vor dem Zeichnen von Icon-Grafiken die SVG-Vorlage. Sie enthält Hilfslinien für Grundlinie und Grenzen, damit Icons vor dem Import an den Fontmetriken ausgerichtet werden können.

Farbfonts

Font Builder kann Farbfonts aus umrandeten SVG-Grafiken erstellen. Der Farbmodus behält unterstützte Füllungen, Konturen, lineare/radiale Verläufe und Deckkraft in COLR/CPAL bei, ergänzt SVG-Fallbacks für unterstützte Verlaufs-/Effektglyphen und lässt currentColor der Textfarbe folgen. Zusätzliche Paletten können für helle oder dunkle Hintergründe markiert werden.

Mit Import Font… lassen sich unterstützte COLR/SVG-Glyphen als Vektorgrafik importieren. Nicht unterstützte Farbeffekte oder rein bitmapbasierte Glyphen werden möglicherweise mit einer Warnung als einfarbige Umrisse importiert.

Webpaket-Ausgabe

Das Webpaket kann Folgendes enthalten:

• Fontdateien
• CSS mit @font-face
• Demo-HTML
• Metadaten
• Glyphenvorschauen
• HTML-Snippets für die Verwendung von Icon-Fonts

Bewährte Vorgehensweisen

• Verwende für Icon-Fonts Private-Use-Area-Unicode-Werte, sofern keine Standardzuordnung erforderlich ist.
• Zentriere Icon-SVGs optisch und richte sie auf derselben Zeichenfläche aus.
• Führe vor jedem Export den Preflight Check aus.
• Behebe rote Zeilen, bevor du Produktionsfonts veröffentlichst.