SVG-Symbole in eine TTF-Schrift umwandeln

Ein geeignetes Format wählen

Eine Symbolschrift eignet sich für einfarbige Zeichen, die Textfarbe und Schriftgröße übernehmen. Inline-SVG erleichtert häufig mehrfarbige Grafiken und gezielte Zugänglichkeit. Keine Variante ist grundsätzlich schneller: Vergleichen Sie Dateien und Darstellung in Ihrer Anwendung.

Gefüllte Pfade vorbereiten

Verwenden Sie gültiges SVG mit viewBox und gefüllten Pfaden. Wandeln Sie Linien in Flächen um und reduzieren Sie nicht unterstützte Transformationen oder Beschneidungen im Vektoreditor. Ein reines Liniensymbol kann ein leeres Zeichen erzeugen. Das folgende Quadrat ist ein einfaches Beispiel für einen gefüllten Pfad.

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 4H20V20H4Z" fill="currentColor"/>
</svg>

Erzeugen und herunterladen

Öffnen Sie den SVG-Schrift-Konverter, fügen Sie Symbole hinzu und erzeugen Sie die Schrift. Der JavaScript-Konverter im Browser erstellt TTF und CSS-Zuordnungen. Laden Sie TTF herunter und kopieren Sie CSS separat. WOFF/WOFF2-Kompression und ZIP-Pakete sind nicht vorhanden. Große Sammlungen können die Oberfläche vorübergehend blockieren, da die Erzeugung im Hauptthread läuft.

Einbinden und testen

Speichern Sie TTF an der URL aus @font-face und prüfen Sie das Laden ohne 404-Fehler. Kontrollieren Sie Namen, Codepunkte, Grundlinie und Größe. Private Unicode-Bereiche gewährleisten keine Zugänglichkeit: Dekorative Zeichen erhalten aria-hidden="true", wichtige Bedienelemente eine Textbeschriftung. WOFF2 benötigt einen separaten Konverter sowie angepasste CSS-URL und Formatangabe. Optionale KI-Hilfe kann nach Zustimmung Eingaben extern senden.

Glyphen-Geometrie, Grundlinienausrichtung und Barrierefreiheit

Bei der Erstellung von TrueType-Icon-Schriften aus Vektorgrafiken sollten Frontend-Entwickler drei wesentliche Gestaltungsregeln beachten:

1. Y-Achsen-Invertierung im Koordinatenraum: Im SVG-Format liegt der Nullpunkt (0,0) in der oberen linken Ecke mit abwärts weisender Y-Achse. OpenType- und TrueType-Schriftmetriken setzen den Nullpunkt hingegen an die untere linke Grundlinie. Der In-Browser-Generator spiegelt vertikale Konturen während der Erstellung automatisch.
2. Em-Square-Skalierung und optische Gewichtung: Icon-Fonts berechnen Zeichenmaße anhand von Einheiten pro Em (meist 1000 oder 2048 UPM). Stellen Sie sicher, dass alle SVG-Grafiken eine einheitliche quadratische viewBox (z. B. 0 0 24 24) nutzen, um vertikale Verschiebungen gegenüber dem Fließtext zu vermeiden.
3. Barrierefreiheit für Screenreader (WCAG 2.1): Die Glyphen liegen im Unicode Private Use Area (PUA). Screenreader können diese Werte nicht sinnvoll vorlesen. Versehen Sie Icon-Elemente stets mit aria-hidden="true" und bieten Sie eine lesbare Beschriftung (<span class="sr-only">...</span>) an.