Icons machen Websites intuitiv. Navigation, Social Media, Aktionsbuttons: Überall braucht es kleine visuelle Hinweise, die Besucher sofort erkennen. Font Awesome löst dieses Problem seit 14 Jahren mit einer Bibliothek von über 2000 kostenlosen Icons, die sich mit einer einzigen Zeile einbinden lassen. Das Problem: Diese eine Zeile bringt Hunderte von Kilobyte mit.

Das vollständige Font Awesome 7 Free-Paket wiegt allein für die Webfont-Dateien etwa 150 KB pro Stil, ohne CSS. Rechnet man das CSS hinzu (weitere ~100 KB minifiziert), liefert jeder erste Seitenaufruf über 250 KB an den Nutzer aus. Schlimmer noch: Wenn Sie 8-10 Icons aus zweitausend verwenden, lädt der Browser trotzdem alles herunter. Im mobilen 4G-Netz bedeutet das 2-3 zusätzliche Sekunden Wartezeit. Google PageSpeed bestraft solche Payloads mit einem direkten Punktabzug.

Doch das Problem ist lösbar. Wir zeigen Ihnen, wie Sie nur die tatsächlich auf Ihrer Site verwendeten Icons aus der Bibliothek extrahieren und eine finale Größe von 10-15 KB erreichen, ohne Funktionsverlust. Alle Methoden sind abgedeckt: von automatisch bis manuell, von Online-Tools bis zu CLI-Utilities. Keine Zauberei, nur funktionierende Techniken.

💡 Kurzer Überblick:

• Analysieren Sie Ihre Site und erstellen Sie eine Liste der tatsächlich genutzten Font Awesome-Icons
• Wählen Sie die Optimierungsmethode passend zu Ihrer Situation: das Online-Tool FontCut, das CLI-Utility fa-subset oder den offiziellen Kit-Mechanismus
• Für maximale Kontrolle nehmen Sie den manuellen Weg über FontForge oder IcoMoon: Das erfordert Aufwand, gibt Ihnen aber vollständige Kontrolle über die finale Datei
• Generieren Sie den beschnittenen Webfont und das CSS, ersetzen Sie damit die Vollversion auf Ihrem Server
• Messen Sie die Geschwindigkeit vorher und nachher: Die typische Verbesserung des PageSpeed-Scores liegt bei 20-40 Punkten

Warum Font Awesome überhaupt beschneiden?

Der Hauptgrund ist die Ladegeschwindigkeit. Eine Google-Studie zeigt, dass 53% der mobilen Besucher eine Seite verlassen, wenn der Ladevorgang länger als 3 Sekunden dauert. Jedes zusätzliche 100 KB im kritischen Rendering-Pfad verlängert die Zeit bis zum First Contentful Paint.

Font Awesome Free 7 enthält drei Stile: Solid, Regular und Brands. Zusammen sind das über 2000 Icons und rund 450 KB komprimierte Webfont-Dateien. Eine typische Landingpage oder ein Blog verwendet 10-20 Icons, also weniger als 1% der Bibliothek. Der Browser lädt alles andere umsonst herunter.

Der zweite Grund sind die Core Web Vitals. Die Metrik LCP (Largest Contentful Paint) hängt direkt davon ab, wie schnell der Browser Schriften empfängt und rendert. Ein unbeschnittenes Font Awesome blockiert die Textdarstellung, bis der Webfont geladen ist. Nach dem Subsetting wird die Datei so klein, dass der Browser sie innerhalb der ersten Netzwerkanfrage erhält.

Der dritte Grund ist mobiler Datenverkehr. Nutzer mit begrenzten Datentarifen werden es Ihnen nicht danken, wenn auf jeder Seite zusätzliche 400 KB anfallen. Subsetting gibt Ihnen die Kontrolle über Ihr Ladebudget zurück.

Zahlen aus der Praxis: Die Reduzierung einer Webfont-Datei von 345 KB auf 14,5 KB steigerte den Lighthouse Performance Score in einem Projekt von 52 auf 89 Punkte. Der Unterschied ist mit bloßem Auge sichtbar: Die Seite wird nahezu sofort interaktiv.

Methode 1: Offizieller Kit-Mechanismus (empfohlen)

Der einfachste und am besten unterstützte Ansatz ist die Verwendung eines Font Awesome Kits mit integriertem Subsetting. Diese Methode funktioniert mit einem kostenlosen Konto und erfordert keine Drittanbieter-Tools.

So funktioniert es

Ein Kit ist ein personalisiertes Font Awesome-Paket, das Sie in Ihrem Dashboard auf fontawesome.com konfigurieren. In den Kit-Einstellungen gibt es den Bereich „Icon Selection" mit zwei Modi:

• By Style: Sie wählen die benötigten Stile aus (Solid, Regular, Brands), und das Kit lädt nur diese. Allein mit diesem Schritt schneiden Sie zwei von drei Stilen ab, wenn Sie nur Solid benötigen.
• By Icon: Sie geben bestimmte Icons über die Suche an, und das Kit generiert eine Datei, die nur diese enthält. Dieser Modus bietet die maximale Komprimierung.

Nach dem Speichern der Einstellungen baut das Kit das Paket automatisch neu. Sie erhalten ein <script>-Tag, das Sie in den <head> Ihrer Site einfügen. Das Font Awesome-CDN liefert die bereits beschnittene Version aus. Keine lokalen Dateien, kein manuelles Bauen.

Vorteile des Kit-Ansatzes

• Keine Notwendigkeit, Dateien herunterzuladen und zu hosten: Das Font Awesome-CDN verteilt das beschnittene Paket global
• Wenn Sie ein neues Icon hinzufügen, aktualisieren Sie einfach die Liste in den Kit-Einstellungen, und der Neuaufbau erfolgt automatisch
• Funktioniert mit Font Awesome Pro, einschließlich der Stile Duotone und Sharp
• Unterstützt sowohl den SVG+JS- als auch den Webfonts+CSS-Modus

Wenn ein Kit nicht passt

Die einzige Einschränkung: Ein beschnittenes Kit kann in der kostenlosen Stufe nicht auf den eigenen Server heruntergeladen werden. Wenn das lokale Hosten von Schriften für Sie kritisch ist (internes Netzwerk, Sicherheitsrichtlinie), ist ein Kit keine Option. Sehen Sie sich dann die Methoden 2 und 3 an.

Methode 2: Online-Tool FontCut

Wenn Sie sich nicht bei Font Awesome registrieren möchten oder eine fertige ZIP-Datei bevorzugen, die Sie in Ihr Repository legen können, probieren Sie FontCut.com. Es ist ein kostenloser Online-Generator, der speziell für Font Awesome 6.4.0 und Bootstrap Icons entwickelt wurde.

Der Prozess umfasst drei Schritte:

• Wählen Sie ein Icon-Set (Font Awesome Free 6.4.0, die neueste verfügbare Version)
• Wählen Sie die benötigten Icons im visuellen Raster aus
• Laden Sie ein ZIP-Archiv mit CSS- und Webfont-Dateien herunter und laden Sie es auf Ihren Server hoch

Das Ergebnis ist ein eigenständiges 10-15 KB-Paket, das Sie selbst hosten. Das Tool erfordert keine Registrierung, und die Vorschau zeigt die finale Größe in Echtzeit an.

Einschränkung: FontCut verwendet FA 6.4.0, nicht die aktuelle Version 7.2.0. Für die meisten Projekte ist der Unterschied vernachlässigbar: Icons im Solid-Stil ändern sich zwischen den Versionen nicht. Wenn Sie jedoch Icons benötigen, die in FA 7 hinzugefügt wurden (Pro+-Pakete), bietet FontCut diese nicht an.

Methode 3: CLI-Utility fa-subset (für Entwickler)

Die automatische Erkennung verwendeter Icons ist der präziseste Ansatz. Das Utility fa-subset (Python, BSD-2-Clause, Anleitung auf Dev.to) durchsucht den Quellcode Ihres Projekts, findet alle fa-*-Klassen und generiert einen beschnittenen Webfont, der nur die tatsächlich verwendeten Icons enthält.

Installation:

1
pip install fonttools

Einfacher Durchlauf (Trockenlauf zur Analyse):

1
python3 bin/fa-subset.py \
2
  --src ./src ./templates \
3
  --ext .html .php .twig .js \
4
  --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \
5
  --out ./optimised \
6
  --dry-run

Das Tool gibt eine Liste der gefundenen Icons und die prognostizierte Größe der bereinigten Datei aus. Ohne das Flag --dry-run generiert es fertiges CSS und einen Webfont im Ordner ./optimised.

Stärken von fa-subset:

• Durchsucht PHP-, HTML-, JS-, Blade-, Twig-, Vue-, React- und beliebige Textdateien in Ihrem Projekt
• Versteht Duotone-Icons (doppelte Codepoints in Font Awesome 6+)
• Kann einen JSON-Bericht für CI/CD-Pipelines ausgeben: --report-json ./report.json --strict-styles
• Funktioniert mit WordPress-Themes, Laravel-Templates und React-/Vue-Komponenten

Reales Produktionsergebnis: Komprimierung von 803 KB (Fonts + CSS) auf 14,5 KB, eine Reduktion um 98%. Das Tool ist kostenlos und nicht an Font-Awesome-Dienste gebunden.

Methode 4: IcoMoon (visueller Font-Builder)

IcoMoon ist eine Webanwendung zum Erstellen benutzerdefinierter Icon-Fonts. Sie ist verfügbar unter icomoon.io/app. Der Ansatz ist etwas komplexer als bei Kits, bietet aber eine einzigartige Fähigkeit: das Mischen von Icons aus verschiedenen Bibliotheken in einer einzigen Datei.

Schritt 1: Font-Awesome-Paket auswählen

Gehen Sie zu icomoon.io/app, klicken Sie auf „Add Icons From Library", suchen Sie Font Awesome in der Liste und klicken Sie auf „Add".

Schritt 2: Benötigte Icons markieren

Markieren Sie im Auswahlfenster alle auf Ihrer Website verwendeten Icons, indem Sie jedes einzelne anklicken. Sie können mehrere Bibliotheken gleichzeitig auswählen (zum Beispiel Font Awesome + Material Icons) und erhalten eine einzige Datei mit Icons aus beiden Sets.

Schritt 3: Font generieren und herunterladen

Klicken Sie nach der Auswahl unten auf der Seite auf die Schaltfläche „Generate Font". IcoMoon zeigt alle ausgewählten Icons an und stellt eine Schaltfläche „Download" bereit. Das ZIP-Archiv enthält Webfont-Dateien (woff, woff2, eot, svg, ttf), eine style.css-Datei und eine Demo demo.html.

Speichern Sie die Dateien in Ihrem Site-Repository und binden Sie style.css im <head> ein. Falls etwas schiefgegangen ist, öffnen Sie demo.html aus dem Archiv: Dort wird genau gezeigt, wie der Font eingebunden und verwendet wird.

IcoMoon eignet sich gut, wenn Sie Icons aus verschiedenen Sets mischen müssen oder wenn Sie grundsätzlich nicht vom Font-Awesome-CDN abhängig sein möchten.

Methode 5: Manuelles Zuschneiden mit FontForge

Die aufwändigste, aber auch die kontrollierteste Methode. Sie eignet sich für Fälle, in denen Sie jedes Byte der endgültigen Datei verstehen möchten oder in einer Umgebung ohne Zugriff auf externe Dienste arbeiten.

Schritt 1: Schriftart lokalisieren

Laden Sie Font Awesome von der offiziellen Website herunter. Entfernen Sie den CDN-Link aus dem <head>, falls er vorhanden war. Entpacken Sie das Archiv in Ihr Website-Repository.

Binden Sie das CSS lokal ein:

1
<link rel="stylesheet" href="/font-awesome/css/font-awesome.css">

Leeren Sie den Browser-Cache und laden Sie die Seite neu. Die Icons sollten wie zuvor angezeigt werden, aber nun kontrollieren Sie die Dateien auf Ihrem Server.

Schritt 2: Überflüssige Dateien entfernen

Nach dem Entpacken des Font-Awesome-Archivs sehen Sie folgende Ordnerstruktur:

Für den Betrieb werden nur CSS- und Webfont-Dateien benötigt. Moderne Browser brauchen lediglich das woff2-Format, daher können ttf-, eot- und svg-Dateien gelöscht werden.

Löschen Sie Less- und SCSS-Quellen, wenn Sie nicht vorhaben, diese zu kompilieren. Behalten Sie nur css/ und fonts/ mit der Datei fa-solid-900.woff2 (oder dem Äquivalent für Ihre Version).

Schritt 3: Webfont in FontForge bearbeiten

Laden Sie FontForge herunter und installieren Sie es (ein kostenloser Open-Source-Schrifteditor). Öffnen Sie die .woff2-Datei über Datei → Öffnen.

Suchen Sie in der FontForge-Oberfläche das Glyphen-Panel. Um manuelles Scrollen zu vermeiden, gehen Sie zu Kodierung → Kompakt: Alle belegten Positionen rücken an den Anfang.

Nun der kritischste Teil: Halten Sie die Umschalttaste gedrückt und wählen Sie alle Glyphen aus, die Ihre Website NICHT verwendet. Löschen Sie diese (Bearbeiten → Löschen). Behalten Sie nur Icons, die tatsächlich in Ihrem Markup vorkommen: Social Media, Pfeile, Menü-Icons, Markenlogos.

Speichern Sie das Ergebnis: Datei → Schriften generieren. Wählen Sie Web Open Font Format (woff2) und geben Sie den Dateinamen an. Ersetzen Sie den ursprünglichen Webfont im Ordner fonts/ durch die zugeschnittene Version.

Laden Sie die Seite neu und überprüfen Sie alle Icons. Falls welche verschwunden sind, haben Sie ein benötigtes Glyph gelöscht: Öffnen Sie FontForge erneut und wiederholen Sie die Auswahl sorgfältiger.

Oder vielleicht einfach die Bibliothek wechseln?

Manchmal besteht die beste Optimierung nicht darin, Font Awesome zu optimieren, sondern ein Werkzeug zu wählen, das von vornherein leichter ist. Moderne Alternativen liefern Icons im SVG-Format mit Tree-Shaking auf Import-Ebene: Nur die Icons, die Sie explizit importieren, landen im Bundle.

Drei Optionen, die eine Überlegung wert sind:

• Lucide Icons: Über 1460 Icons, MIT-Lizenz, direkter Nachfolger von Feather Icons. Icons auf einem 24px-Raster, stilistisch nah an FA, aber das Paket wiegt mit Tree-Shaking nur wenige Kilobyte. Für React/Vue/Svelte native Komponenten mit size-, color- und strokeWidth-Props.

• Phosphor Icons: Über 1400 Icons in sechs Stilen (thin, light, regular, bold, fill, duotone). Jedes Icon wird einzeln importiert: import { House } from '@phosphor-icons/react'. Kein ungenutzter Ballast.

• Bootstrap Icons: Über 2000 SVG-Icons, kostenlos, aktiv entwickelt. Direkte Kompatibilität mit dem Bootstrap-Ökosystem, aber auch unabhängig nutzbar. Separate SVG-Dateien erlauben das Einbetten von Icons inline ohne zusätzliche Anfragen.

Wenn Ihre Website auf WordPress läuft, lesen Sie unseren Leitfaden zum Einbinden von Font Awesome in WordPress. Wer tiefer in das Thema Webfonts einsteigen möchte, findet eine detaillierte Analyse zum Laden von Webfonts ohne Blockieren des Renderings.

⁉️🤔 Häufig gestellte Fragen

Was ist Icon-Subsetting und warum ist es nötig?

Subsetting bezeichnet den Prozess, eine reduzierte Version eines Icon-Fonts zu erstellen, die nur die tatsächlich auf der Website verwendeten Icons enthält. Das vollständige Font Awesome 7 Free-Paket wiegt etwa 450 KB in komprimierten Webfont-Dateien. Eine typische Website nutzt 10 bis 20 Icons; nach dem Subsetting schrumpft die Datei auf 10 bis 15 KB. Der Ladeunterschied schlägt sich unmittelbar im PageSpeed Score nieder: Die typische Verbesserung liegt bei 20 bis 40 Punkten.

Wie viele Icons lädt der Browser, wenn ich Font Awesome per CDN eingebunden habe?

Alle. Ein CDN-Link auf all.min.css zieht den gesamten Satz aus drei Stilen: Solid, Regular und Brands. Der Browser lädt sämtliche Webfont-Dateien, selbst wenn nur ein Icon auf der Seite verwendet wird. Genau deshalb ist der CDN-Ansatz ohne Kit derjenige mit dem höchsten Byte-Verbrauch. Ein Kit mit der Einstellung „By Icon" löst dieses Problem: Das CDN liefert nur die Icons aus, die Sie in den Einstellungen explizit ausgewählt haben.

Welche Optimierungsmethode sollte ich für eine WordPress-Website wählen?

Wenn Ihre Website auf WordPress läuft und Sie sich nicht mit CLI befassen möchten, nutzen Sie das offizielle Kit (Methode 1). Die Einrichtung dauert fünf Minuten im fontawesome.com-Dashboard, und die Ergebnisse werden sofort per CDN ausgeliefert. Verbietet Ihre Sicherheitsrichtlinie die Nutzung eines CDN, funktioniert FontCut (Methode 2): Laden Sie das ZIP herunter, übertragen Sie es per FTP und binden Sie es in der header.php ein. Für Entwickler, die Automatisierung wünschen, kann fa-subset (Methode 3) die PHP-Templates Ihres Themes scannen und den Font bei jedem Deployment neu erstellen.

Kann ich die Webfont-Formate ttf, eot und svg gefahrlos löschen?

Ja. Moderne Browser (Chrome, Firefox, Safari, Edge) unterstützen woff2 seit 2016. Laut Can I Use-Daten deckt die Unterstützung über 98% des weltweiten Browsermarktes ab. Das Format woff2 bietet eine bessere Kompression (im Schnitt 30% kompakter als woff). Die Dateien eot (nur für IE8 nötig), ttf und svg können bedenkenlos aus dem Fonts-Ordner gelöscht werden. Behalten Sie nur woff2, und falls Sie Unterstützung für ältere Safari-Versionen unter iOS 12 benötigen, fügen Sie woff als Fallback hinzu.

Lohnt es sich 2026 überhaupt noch, Font Awesome zu verwenden?

Das hängt vom Projekt ab. Wenn Sie Font Awesome bereits implementiert haben und 5 bis 10 Icons nutzen, löst Subsetting (eine der oben genannten Methoden) das Gewichtsproblem in einer Stunde. Handelt es sich um ein neues Projekt und Sie wählen eine Bibliothek von Grund auf neu aus, ziehen Sie Lucide oder Phosphor in Betracht: Diese sind von Anfang an auf Tree-Shaking ausgelegt und verursachen null Overhead. Font Awesome bleibt führend bei der Menge des Icon-Ökosystems und den Integrationen, aber sein Gewichtsnachteil ohne Subsetting ist höher als bei modernen SVG-Alternativen.

Lohnt sich der Aufwand für ein paar Dutzend Kilobyte?

Eindeutig ja. Jedes nicht optimierte Kilobyte auf dem kritischen Rendering-Pfad reduziert direkt die Conversion. Amazon hat berechnet, dass 100 ms Ladeverzögerung 1% Umsatz kosten. Google bestraft langsame Seiten in den mobilen Suchergebnissen. Das ist kein Perfektionismus, sondern direkte Ökonomie.

Wählen Sie die Methode, die zu Ihrer Situation passt:

• Minimaler Aufwand: Kit mit der Einstellung „By Icon". 5 Minuten, Ergebnis sofort per CDN.
• Lokal gehostet, keine Registrierungen: FontCut. 10 Minuten, ZIP auf Ihrem Server.
• CI/CD-Automatisierung: fa-subset. Scannt den Code, baut beim Deployment neu.
• Volle Kontrolle: FontForge oder IcoMoon. Dauert länger, aber Sie kennen jedes Glyph.

Die Reduzierung von 450 KB auf 15 KB verändert das Geschwindigkeitsempfinden dramatisch. Probieren Sie es an einem Projekt aus, messen Sie PageSpeed vorher und nachher. Das Ergebnis wird für sich sprechen.