
Generator für Icon-Fonts
Frei
Fontello ist ein leistungsstarkes Web-Tool, mit dem Entwickler benutzerdefinierte Icon-Fonts aus Vektor-SVG-Dateien erstellen können. Im Gegensatz zu monolithischen Icon-Bibliotheken wie Font Awesome ermöglicht Fontello die gezielte Auswahl spezifischer Icons aus verschiedenen Sets oder den Upload eigener SVGs, was die Bundle-Größe erheblich reduziert. Es generiert automatisch CSS-, WOFF-, EOT- und TTF-Dateien und gewährleistet so Browser-Kompatibilität. Durch das Entfernen ungenutzter Glyphen wird die Web-Performance optimiert und die Anzahl der HTTP-Anfragen minimiert, was es zu einem unverzichtbaren Werkzeug für Front-End-Entwickler macht, die auf eine schlanke, performante UI-Architektur setzen.
Fontello ermöglicht die Auswahl nur der für Ihre Anwendung benötigten Glyphen. Durch den Ausschluss tausender ungenutzter Icons können Sie die Schriftdateigröße von hunderten Kilobytes auf wenige Kilobytes reduzieren. Diese granulare Kontrolle verbessert direkt die Core Web Vitals, insbesondere durch die Reduzierung der Largest Contentful Paint (LCP)-Zeiten mittels minimierter Payload-Größe kritischer Assets.
Die Plattform enthält eine robuste Engine, die Vektor-SVG-Pfade in standardisierte Font-Formate (WOFF, WOFF2, TTF, EOT) konvertiert. Sie übernimmt automatisch die Pfadnormalisierung und Koordinatenskalierung, wodurch Ihre benutzerdefinierten Icons bei jeder Auflösung scharf dargestellt werden. Dies ist der Verwendung von rohen SVGs im DOM überlegen, da eine einfache Farb- und Größenmanipulation über Standard-CSS-Eigenschaften wie 'color' und 'font-size' möglich ist.
Nach dem Download stellt Fontello eine sofort einsatzbereite CSS-Datei bereit, die alle notwendigen @font-face-Deklarationen und Klassendefinitionen enthält. Dies eliminiert den manuellen Aufwand für das Schreiben von Boilerplate-CSS für Icon-Positionierung, Zeilenhöhenanpassungen und vertikale Ausrichtung. Der generierte Code ist für moderne Browser optimiert und gewährleistet eine konsistente Darstellung in Chrome, Firefox, Safari und Edge ohne komplexe Polyfills.
Benutzer haben die volle Kontrolle über das Unicode-Mapping für jedes Icon. Dies ist entscheidend für Entwickler, die Icons in Legacy-Systeme oder komplexe Design-Systeme integrieren, in denen bestimmte Zeichencodes bereits reserviert sein könnten. Durch die manuelle Zuweisung von Codes verhindern Sie Zeichenkollisionen und stellen sicher, dass sich der Icon-Font nahtlos und ohne unerwartetes Verhalten in bestehende Typografie-Stacks integriert.
Fontello generiert gleichzeitig mehrere Font-Formate, um maximale Browser-Kompatibilität zu gewährleisten. Während WOFF2 aufgrund seiner überlegenen Kompression für moderne Browser bevorzugt wird, enthält Fontello ältere Formate wie EOT und TTF zur Unterstützung von Legacy-Umgebungen. Dies stellt sicher, dass Ihre UI über eine breite Palette von Geräten hinweg konsistent bleibt, von modernen Smartphones bis hin zu älteren Desktop-Browsern, ohne dass zusätzliche Build-Time-Konvertierungstools erforderlich sind.
Besuchen Sie fontello.com und durchsuchen Sie die integrierten Icon-Sammlungen oder ziehen Sie Ihre eigenen SVG-Dateien per Drag-and-Drop in den Tab 'Custom Icons'.,Wählen Sie die für Ihr Projekt benötigten Icons durch Anklicken aus; ausgewählte Icons werden rot markiert.,Navigieren Sie zum Tab 'Customize Names', um Ihre Icons umzubenennen; dies definiert die CSS-Klassennamen in Ihrem Stylesheet.,Gehen Sie zum Tab 'Customize Codes', um Ihre Icons spezifischen Unicode-Zeichen zuzuordnen, falls Sie Konflikte mit bestehenden Zeichensätzen vermeiden müssen.,Klicken Sie oben rechts auf den roten 'Download webfont'-Button, um ein ZIP-Archiv mit den generierten Fonts und CSS zu erhalten.,Entpacken Sie die Dateien in Ihr Projektverzeichnis und verknüpfen Sie die generierte CSS-Datei mit Ihrem HTML, um die Icons über Klassennamen zu verwenden.
Front-End-Entwickler nutzen Fontello, um schwere Icon-Bibliotheken zu ersetzen. Durch die Erstellung eines benutzerdefinierten Fonts, der nur die 20-30 tatsächlich in einer Web-App verwendeten Icons enthält, reduzieren sie die gesamte Asset-Größe um bis zu 90 %, was zu schnelleren Ladezeiten und verbesserten SEO-Rankings führt.
Designer und Entwickler arbeiten zusammen, um proprietäre Markenlogos und einzigartige UI-Elemente in einen einzigen, kohärenten Icon-Font zu konvertieren. Dies ermöglicht es, die Marken-Assets mittels CSS zu stylen, was dynamische Farbänderungen bei Hover- oder Zustandsänderungen erlaubt.
UI/UX-Designer nutzen Fontello, um schnell ein Set von Icons aus mehreren Open-Source-Sammlungen (wie Entypo oder Iconic) zusammenzustellen, um Interface-Konzepte zu testen. Es bietet eine einheitliche Methode, um unterschiedliche Icon-Stile innerhalb eines einzigen Projekts zu verwalten.
Müssen Icon-Assets effizient verwalten und gleichzeitig die Bundle-Größen klein halten. Fontello löst das Problem 'aufgeblähter' Icon-Bibliotheken durch die Bereitstellung einer optimierten, maßgeschneiderten Font-Datei.
Benötigen eine Möglichkeit, benutzerdefinierte Vektor-Icons in Webprojekte zu implementieren, ohne darauf angewiesen zu sein, dass Entwickler für jede Bildschirmgröße manuell einzelne SVG-Dateien exportieren und optimieren.
Fokussiert auf die Reduzierung von HTTP-Anfragen und Asset-Payload-Größen. Sie nutzen Fontello, um mehrere Icons in einer einzigen Font-Datei zu konsolidieren, was die Anzahl der für das Rendern der UI erforderlichen Netzwerkanfragen reduziert.
Fontello ist ein kostenloses Open-Source-Projekt. Die Software wird unter der MIT-Lizenz bereitgestellt, was die kostenlose Nutzung sowohl in persönlichen als auch in kommerziellen Projekten ermöglicht.