Icon-Web-Fonts für deine Bedürfnisse optimieren

Auf so gut wie jeder modernen Website findet man Icons. Sie werden sehr oft genutzt, um auf Social-Media-Profile zu verlinken. Oft werden diese Icon-Fonts bereits mit den WordPress-Themes mitgeliefert. Ich verwende mittlerweile für selbst geschriebene Themes in der Regel SVG-Symbole anstalle von Icon-Web-Fonts. Aber wenn man ein Themes nur ein wenig anpassen möchte, dann sind Web-Fonts eventuell doch die bessere Wahl.

Web-Fonts lokal laden

Viele laden Web-Fonts mittlerweile aufgrund der DSGVO lokal. Zu diesem Zweck werden sie meistens runtergeladen und ins Child-Theme integriert. Dies ist die perfekte Gelegenheit, sich darüber Gedanken zu machen, welche Icons man wirklich braucht. Icon-Fonts für Social-Media-Profile sind ein sehr gutes Beispiel dafür, wieso man die Schrift vielleicht anpassen möchte.

Eine Icon-Web-Font anpassen

Nehmen wir die beliebte Schriftart Font Awesome als ein Beispiel. Sie enthält 1544 Icons, 433 dafür für Markenlogos und Social-Media-Icons. Aber braucht man wirklich alle davon? Falls nicht, würde es sich anbieten, nur die Icons zu laden, die man wirklich benötigt. In einem SVG Sprite könnte man überflüssige Symbole einfach löschen, in einer Web-Font ist das etwas schwieriger.

Online-Service für die Anpassung von Schriften

Für ein Projekt stand ich vor der Aufgabe ein Social-Media-Profil zu verlinken, zu dem die im Theme enthaltene Schriftart kein passendes Icon zur Verfügung stellte. Ich habe mich also dafür entschieden, hier Font Awesome einzusetzen. Auf der Suche nach einer Möglichkeit nur einige Icons zu nutzen, bin ich auf die Seite Fontello gestoßen. Hier kann man aus einer Vielzahl an Icon-Web-Fonts auswählen und eine davon ist Font Awesome.

Auf der Website kann man sehr einfach über zwei Suchfelder nach dem Namen einer Schriftart oder dem Namen der Icons suchen. Durch Mehrfachauswahl kann man die benötigten Icon markieren. Hier sollte man eventuell auch gleich Icons auswählen, die man in Zukunft auch noch brauchen könnte.

Auf einem weiteren Tab kann man die Namen der Icons oder den Unicode für die resultierenden Dateien festlegen. Dann lädt man die Datei mit der Auswahl herunter, die die Schrift in verschiedenen Formaten sowie das notwendige CSS enthält.

Viel Bandbreite einsparen

Aber lohnt sich das alles? Font Awesome verwendet 3 Dateien für verschiedene Icon-Typen in jeweils 5 Formaten. Die woff2 Dateien haben insgesamt 165kB. Hinzu kommen noch 57kB für das minifizierte CSS.

Für das beschriebene Projekt benötigte ich aber nur 9 Icons und die woff2 Datei hatte lediglich 4kB. Hinzu kamen noch 2kB CSS (unminifiziert), welche auf 1kB (minifiziert) reduziert werden kann.

Insgesamt können also 2 Dateien/Requests und fast 98% Bandbreite (217kB) eingespart werden.

Optimiere deine Schriften!

Wie du als sehen kann, bietet die Optimierung von Icon-Fonts ein großes Potential Bandbreite einzusparen und deine Seite schneller laden zu lassen. Der einzige Nachteil ist, dass man die Schrift manuell erweitern muss, wenn man neue Icons benötigt.

Wenn man Google Fonts verwendet, kann man über den text Parameter sehr einfach definieren, welche Zeichen man benötigt. Leider findet man bei Google Fonts keine Icon-Web-Fonts und ich konnte auch keine andere Seite finden, die eine ähnliche Funktion anbietet. Solltet ihr eine solche Seite kennen, hinterlasst bitte einen Kommentar mit dem Tipp.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugins, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

4 Kommentare » Schreibe einen Kommentar

  1. Das versuche ich seit ein paar Tagen schon…
    Dummerweise bockt der IE bei lokalen (also auf Server) Dateien.

    FontAwesome bekomme ich mit dem Ding nur mit dem Script zum laufen.
    Nur als Font zeigt der IE die nicht an.

    Von der 57kb Großen FOntellodatei garnicht zu reden 😉

    Alle Browser die ich getestet habe, super, nur der IE nicht…

    hast du eine Idee?

    Bei der hinterlegten Seite zum Beispiel zu sehen an den weißen Icons unten, und an dem fehlenden M(edium) in der untersten Leiste am Ende.

    • Hallo Micha,

      Meinst du diese Seite: https://test.fotoglut.de

      Hier kann ich einem aktuellen IE 11 alle Symbole erkennen. Mir ist aber aufgefallen, dass du die Schriftart doppelt einbindest. Ich könnte mir vorstellen, dass die zweite Art zu Problemen führt:

      @font-face {
  font-family: 'gluticon';
  src: url('/wp-content/uploads/fonts/gluticon/font/gluticon.eot?82429189');
  src: url('/wp-content/uploads/fonts/gluticon/font/gluticon.eot?82429189#iefix') format('embedded-opentype'),
       url('/wp-content/uploads/fonts/gluticon/font/gluticon.svg?82429189#gluticon') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'gluticon';
  src: url('data:application/octet-stream;base64,d09GRg...') format('woff'),
       url('data:application/octet-stream;base64,AAEAA...') format('truetype');
}

      • Hi,

        ich verstehe das nicht.
        Das habe ich gestern als letzte Möglichkeit eingebunden. (Ist das Original CSS von der Seite)
        Nachdem ich das umgeschrieben habe, also 2ten Font-Face raus, geht es auch bei mir.

        Jetzt sogar ohne die Embeded.

        Ich verstehe das nicht, glaube ich baue lieber wieder mit Lego ?

        Danke fürs drüber schauen

  2. Hi,

    ich verstehe das nicht.
    Das habe ich gestern als letzte Möglichkeit eingebunden. (Ist das Original CSS von der Seite)
    Nachdem ich das umgeschrieben habe, also 2ten Font-Face raus, geht es auch bei mir.

    Jetzt sogar ohne die Embeded.

    Ich verstehe das nicht, glaube ich baue lieber wieder mit Lego 🙂

    Danke fürs drüber schauen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert