Font Awesome lokal einbinden

Was ist Font Awesome überhaupt ?

Bei Font Awesome handelt es sich letztlich um eine Schriftart. Allerdings sehen die Zeichen nicht aus wie Buchstaben, sondern stellen Icons dar. Die grundsätzliche Basis der Darstellung stellt CSS + LESS (Stylesheet Language) dar.

Daraus ergeben sich einige Vorteile gegenüber der entsprechenden Verwendung von Rasterbilddateien, zum Beispiel, was die Skalierung betrifft, aber auch hinsichtlich der Performance. 

Vorteile von Font Awesome für Icons

Wenn ihr für eure Icons Rastergrafiken, also Bilder wie .png, .jpeg oder Ähnliches verwendet, dann habt ihr zwar maximale Freiheit hinsichtlich der Gestaltung – allerdings zum Nachteil einer komplizierteren Einbettung, einer begrenzten Skalierung und der Performance. Es bedarf meistens zum Beispiel mehr Speicher, einzelne Pixel zu speichern, als mathematische Formeln, welche Formen beschreiben. 

Letzteres ist bei Font Awesome der Fall. Weil Rastergrafiken größer sind, brauchen sie auch länger zum Laden als Font Awesome. Wer jetzt denkt „Macht nix, ich hab‘ Vektorgrafiken als Icons“, der könnte dennoch zum Umdenken bewogen werden: Denn im Gegensatz zu individuellen Vektorgrafiken lässt sich Font Awesome einfacher in die Website einbetten und einfacher bearbeiten, beispielsweise einfärben. 

Die Vorteile von Font Awesome lassen sich im Kontext von Raster- und Vektorgrafiken als Icons folgendermaßen auf den Punkt bringen:

• Weniger Speicherbedarf
• Schnellere Ladezeiten
• Einfachere Handhabung

Font Awesome wird extrem häufig genutzt. Ihr benutzt Font Awesome sehr wahrscheinlich auch in eurem WP Theme. Überprüfen könnt ihr das, indem ihr nachschaut, ob das entsprechende Stylesheet „all.css“ vom fontawesome-Server reingeladen wird. 

Den entsprechenden Befehl findet ihr dann in eurer Header-Datei (header.php). Das sieht dann ungefähr so aus:

<link rel='stylesheet' id='font-awesome-css' href='<a style="font-family: monospace; font-size: medium; font-style: normal; font-weight: 400; white-space: pre-wrap;" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css?wpfas=true" target="_blank" rel="noreferrer noopener">https://use.fontawesome.com/releases/v5.12.0/css/all.css?wpfas=true</a>' type='text/css' media='all' />Code-Sprache: HTML, XML (xml)

Was Font Awesome mit der DSGVO zu tun hat

Wie ihr gerade im Code gesehen habt, wird die Schriftart Font Awesome vom fontawesome-Server reingeladen. Dabei handelt es sich um einen Server aus den USA. Damit der euch die Schriftart schickt, muss er die entsprechende http-Anfrage bearbeiten – die wiederum vom Nutzer eurer Website kommt und voller Informationen steckt. Beispielsweise beinhaltet sie die IP des Nutzers, die ihr damit an Google weitergebt. 

Ihr erinnert euch noch an den Blogartikel über die Deaktivierung von Google Fonts? Der Grund ist genau derselbe. Alleine das also führt schon dazu, dass ihr Font Awesome, wollt ihr es weiter legal verwenden, lokal einbinden müsst.

Was spricht neben der DSGVO für die lokale Einbindung von Font Awesome?

Angenommen, die EU-Datenschutzgrundverordnung würde euch keinen Strich durch die Rechnung mit dem Nachladen von Font Awesome machen. Welche Gründe gäbe es, dies dennoch nicht zu tun und stattdessen eine lokale Kopie von Font Awesome auf dem eigenen Server einzubinden?

Ganz klar: Performance. Alles, was in irgendeiner Form nachgeladen wird und nicht besonders viel Bandbreite braucht (z.B. hochauflösende Videos oder Bilder) oder Rechenkapazitäten vom Server frisst (z.B. Online-Tools), würde euch bzw. euren Nutzern Ladezeit ersparen, würdet ihr es lokal vorhalten. Schließlich kostet nicht nur die eigentliche Anfrage zum fontawesome-Server Zeit, sondern auch der TLS-Handshake. 

Außerdem verlasst ihr euch damit auf eine externe Quelle außerhalb eurer Kontrolle. Sie kann ausfallen oder plötzlich eine andere Schriftart liefern. Ja, es gibt Caching und so weiter, aber auch das verbessert lediglich die Ladezeit ein wenig. So gesehen bringt die lokale Einbindung von Font Awesome also nur Vorteile – oder?

Tatsächlich gibt es auch Nachteile! Beispielsweise habt ihr mit eurer eigenen Kopie von Font Awesome nicht immer die aktuelle Version „vorrätig“. Technisch weniger versierte Nutzer können bei der Installation/Einbindung außerdem etwas mehr falsch machen, als beim einfachen Nachladen über einen einzigen Befehl in der Header-Datei. 

Letzteres wird angesichts der eher statischen Eigenschaften einer Schriftart wohl der größte Nachteil sein. Um diesen auszumerzen, zeigen wir euch jetzt gleich ausführlich, wie ihr Font Awesome lokal einbindet!

So bindet ihr Font Awesome lokal ein

Im Endeffekt müssen wir für die lokale Einbindung dafür sorgen, dass unser bzw. euer Webserver die Schriftart Font Awesome ausliefern kann. Wir unterteilen diesen Vorgang in drei Schritte und sagen gleich vorab, dass wir leider kein Plugin gefunden haben und es demnach nicht einfacher geht:

1. Font Awesome Daten von der offiziellen Webseite herunterladen!
2. Daten auf den Server hochladen
3. Dateien entsprechend in dein WordPress einbinden!

Font Awesome herunterladen

Der erste Schritt wird uns seitens Font Awesome sehr einfach gemacht. Besucht die Seite https://www.fontawesome.com und klicke im Menü oben links auf „Docs for Web“, dann auf „Hosting Font Awesome Yourself“ Wir haben diese Download-Seite unter der Adresse gerade für euch schon verlinkt. 

Ladet euch die .zip-Datei herunter und entpackt sie. Wir brauchen für den folgenden Schritt Nummer 2 nur die entpackten Ordner „webfonts“ und den CSS Ordner – speziell die „all.css“-Datei.

Ihr benötigt die 2 folgenden Ordner:
– webfonts
– CSS

Diese beiden Ordner werden per FTP auf deinen Server geladen.

Wie und wo du die Dateien auf deinem Server speicherst

Der zweite Schritt ist etwas komplizierter, weil ihr den „webfonts“-Ordner und die „all.css“-Datei jetzt auf eurem Webserver ablegen werdet. Darauf braucht ihr erst einmal Zugriff. Das klappt z.B. über das File Transfer Protocol (FTP) bzw. über ein entsprechendes Tool wie FileZilla. Die fortgeschrittenen User werden dafür aus Sicherheitsgründen wahrscheinlich lieber SSH benutzen. Wir bleiben bei FTP und benutzen FileZilla, womit wir uns erstmal bei unserem Webserver anmelden müssen. 

Dafür braucht ihr eure Zugangsdaten, die ihr von eurem Hoster bekommen könnt. Nun könnt ihr euch mit FileZilla ganz ähnlich zum Windows-Explorer durch die Ordner und Dateien auf eurem Webserver klicken.

Im Ordner eurer WP-Installation ist es nun zu 100% euch überlassen wo die „font Awesome“ Daten hochgeladen werden. Teilweise werden hier in irgendwelchen Guides „feste Pfade“ als “notwendig” angegeben – aber das ist Quatsch. Am Ende benötigen wir einen Ordner in dem wir die font Awesome Daten abgelegt haben und das war es.

Mein Vorschlag hier: 

Legt einen neuen Ordner im Unterordner /wp-content/ an – Name: „fontawesome“

Optisch würde das Ganze dann so aussehen:

In diesen neuen Ordner fontawesome müssen wir nun die benötigten Daten von fontawesome hochladen – also die Ordner “CSS” und “Webfonts”

Final sollte das Ganze dann also So bei dir aussehen:

Die lokale Schriftart in dein Theme einbinden

So, jetzt wird es noch einmal spannend. Wir haben nun die fontawesome Daten auf unserem Webspace liegen und müssen nun unserer WordPress Seite noch sagen dass sie diese entsprechenden Daten nutzen soll.

Dieser Schritt ist praktisch gleichzusetzen mit der einen Codezeile, mit der ihr Font Awesome vorher eventuell bereits nachgeladen habt.

Aber an Stelle auf den fontawesome-Server zu verweisen, setzt du deinen eigenen Pfad in die „header.php“-Datei – vorausgesetzt, du siehst sie in deiner aktiven WordPress Installation.

Je nach Theme gibt es unterschiedliche Möglichkeiten diesen Punkt umzusetzen.

Das grundsätzliche Ziel ist es in deinem Theme in den Header folgenden Code zu unterzubringen:

 <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">Code-Sprache: HTML, XML (xml)

Folgende Möglichkeiten hast du hier:

1. Einbau der Codezeile in deine header.php – Voraussetzung dafür ist die Verwendung eines Child-Themes und dass du die header.php aus dem Hauptordner deines themes (Parent-Themes) in dein Child-Theme Ordner kopiert hast. Die Codezeile fügst du dann einfach irgendwo nach dem öffnenden <head> und dem schließenden </head> ein.

Dafür kannst du in Kombination mit FileZilla einen Texteditor oder direkt die Editor-Funktion in Wordpress benutzen.

Wichtig! Solltest du die Änderungen direkt über den WordPress Editor vornehmen, solltest du dir wirklich sicher sein was du tust und im Notfall einen FTP Zugang haben.

In vielen themes gibt es die Möglichkeit über die theme Einstellungen Code in die header.php einzubringen. Entsprechende Optionen für bekannte themes werde ich hier im Artikel noch separat nachreichen!

Es ist vollbracht! Ihr habt Font Awesome auf Basis einer lokalen Kopie sehr wahrscheinlich erfolgreich in euer Theme eingebunden.

Überprüfen wir das doch gleich: Besucht die Seite https://fontawesome.com/icons und sucht dort nach einem Icon, welches ihr verwenden wollt.

Über einen Klick auf das passende Icon gelangt ihr zur Unterseite desselben, auf der auch schon der für WordPress notwendige Quellcode eingeblendet wird. 

Diesen kopiert ihr nun in euren Beitrag und schaut, ob es funktioniert bzw. ob das Icon angezeigt wird! Achtet im Übrigen darauf, dass ihr zum Einfügen den Texteditor und nicht den visuellen Editor benutzt.

Der Code, für die Leser die das an dieser Stelle noch nicht wissen, sieht z.B. so aus:

<i class=“fab fa-angellist“></i>Code-Sprache: HTML, XML (xml)

Gut zu wissen
fontawesome lässt sich über CSS modifizieren. Die reine Größe lässt sich aber z.B. auch ganz komfortabel durch einen Zusatz direkt im font awesome Code definieren. In unserem Beispiel sieht der Code z.B. wie folgt aus: <i class=”fab fa-angellist fa-7x”> </i>

Wie füge ich Font Awesome bei den großen bekannten Themes ein?

Grundsätzlich ist der Weg über die header.php bei jedem theme eine Option. 

Nun haben aber bekannte themes wie das Astra, das Divi oder auch das Avada (um einige Beispielhaft zu nennen) oft eigene Möglichkeiten Code in spezielle Bereiche wie z.B. dem Header zu integrieren. Diese Optionen möchte ich im folgenden für die 3 Themes Astra, Divi und Avada kurz erläutern.

Font Awesome im Divi Theme integrieren

Das Divi Theme hat standardmäßig erst einmal keine direkte Integration von Font Awesome. Um font Awesome nutzen zu könnte man nun den bereits beschriebenen Weg über die Modifikation der header.php gehen – sinnvoller und einfacher ist aber die Nutzung der Funktion direkt im Divi Theme.

Ruft dafür unter DIVI > Theme-Optionen auf und klickt hier auf den Reiter Integration

Hier fügen wir nun unseren Code entsprechend ein. In unserem Fall für das lokale Hosting von Font Awesome wäre dies wieder:

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">Code-Sprache: HTML, XML (xml)

your-path-to-fontawesome ist natürlich wieder gleichbedeutend mit eurem Pfad wo ihr die font awesome Daten abgelegt habt.

Font Awesome schränkt euch ein? Macht eure eigene Schriftart!

Zum Nachteil hingegen steht bei Font Awesome die Beschränkung in der Gestaltung. Die Schriftart bringt zwar sehr viele Icons mit, aber eben nicht alle und schon gar nicht individuelle. Mit etwas Kenntnissen im Bereich Schriftdesign jedoch könnte man die Schriftart an die eigenen Bedürfnisse anpassen bzw. eine eigene Schriftart für Icons erstellen. 

Spätestens jetzt gibt es bis auf Mehrfarben- oder SVG-Effekt-Icons praktisch keinen nennenswerten Vorteil mehr, der für die Verwendung von einzelnen Vektorgrafiken oder gar Pixelbildern für Icons spricht.

Tools für euren eigenen Icon-Font

Übrigens: Es ist gar nicht so schwer, eine eigene Schriftart zu erstellen. Im Web findet ihr dazu viele mehr oder weniger tolle Tools, darunter beispielsweise Offline-Programme wie BirdFont (hohe Einlernschwelle) oder die generell weniger komplexen aber einfacher zu lernenden Online-Services wie FontArk, Prototypo, Calligraphr und viele weitere. 

Idealerweise beschäftigt ihr euch vorher noch mit einigen Fachbegriffen und Grundregeln zum Design einer eigenen Schriftart, auch wenn diese bei Icons nur minder ins Gewicht fallen und ihr ziemlich frei in der Gestaltung seid.

Zusammenfassend profitiert ihr von eurem individuellen „Font Awesome“ bzw. von eurer eigenen Icon-Schriftart immer dann, wenn ihr einfache Icons mit einer Farbe und ohne gemischte Effekte wie Leuchten oder Transparenz benötigt. 

Das klappt deshalb nicht, weil der Zugriff nur auf Zeichenebene erfolgt und nicht innerhalb dessen möglich ist, wie das bei einem .svg der Fall wäre.

FAQ Font Awesome