Font Builder

Erstelle 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

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

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.

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.