WordPress Theme Optimierung – Icon Fonts

Dies ist der zweite Artikel zu meiner Spontansession auf dem WordCamp 2014 in Hamburg.  Teil 1 beschäftigt sich mit Sprites.

Ein sehr beliebtes Mittel zur Gestaltung moderner Websites sind sogenannte Webfonts. Seit dem die Unterstützung auch in Firefox und Webkit weit verbreitet ist, sind diese eine echte Alternative zu Bildern mit Text oder Cufon. Ihr habt richtig gelesen, diesmal ist der Internet Explorer Vorreiter gewesen, wenn auch mit einem eigenen Süppchen (das EOT Format), aber die Unterstützung geht zurück bis zum Internet Explorer 4.

Icon Fonts sind auf dem PC bereits relativ alt, einer der bekanntesten Vertreter ist die Schrift Wingdings. Im Web haben diese mit leicht geänderten Vorzeichen eine Renaissance erlebt.

Typischerweise handelt es sich bei IconFonts um Schriften, bei denen im Unicode Bereich ab 0xE000 der für individuelle Zeichen vorgesehen ist Icons hinterlegt werden. Diese werden anschließend entweder über ihren Unicode wert oder eine Ligatur dargestellt.

Einsatzbereiche

Der primäre Einsatzbereich von Icon Fonts ist wie der Name schon sagt die Darstellung von Icons. In der Regel sind die Icons einfarbig, mit einem Trick sind jedoch Icons mit bis zu 3 Farben möglich. Schlagschatten und auch Farbwechsel sind im Gegensatz zu Farbverläufen möglich.

Vor und Nachteile im vergleich zu alternativen Techniken

Die meist eingesetzte alternative zu Web-Fonts sind Sprites der Vorteil der Sprites liegt darin das hier vollfarbige Bilder einsetzbar sind. Der Vorteil der IconFont ist das alles was mit CSS möglich ist, auch mit IconFonts möglich, also Farbwechsel, Animationen oder Schlagschatten.

Font Awesome

Einer der bekanntesten Vertreter ist Font Awesome diese Schriftart ist unter anderem im Twitter bootstrap verwendet, sowie im WordPress Backend im Einsatz. Vor allem zeichnet sie sich dadurch aus da sie kostenfrei nutzbar ist, auch für kommerzielle Projekte und eine hohe Anzahl von hochwertigen Icons beinhaltet. Zur Verwendung steht bereits eine komplette CSS Datei zur Verfügung, und man muss nur noch dem gewünschten Element die entsprechende CSS Klasse geben. Schon wird das entsprechende Icon angezeigt.

Ligature Symbols

Dies Schrift geht einen leicht anderen Ansatz wie Font Awesome, Ligature Symbols nutzt für die Darstellung Ligaturen, eigentlich ein sehr schöner Ansatz, gerade im Bezug auf Suchmaschinen hat dieser Ansatz durchaus seine Vorteile. Bei einer Ligatur wird eine Zeichenfolge in ein einziges Zeichen umgewandelt. Zum Beispiel schreibt man „facebook“ und statt dessen wird das Facebook Logo dargestellt. Auch die Icons sind mit viel Liebe gestaltet, einen kleinen Nachteil hat diese Technik jedoch, und zwar funktionieren Ligaturen leider nicht in jedem Browser. Ligaturen werden standardmäßig aus Performancegründen nicht dargestellt, diese werden über den CSS Befehl „text-rendering: optimizeLegibility;“ aktiviert. Dieser Befehl funktioniert jedoch z.B. in Safari 5 der in älteren Mac Versionen wie z.B. Snow Leopard im Einsatz ist. Aus diesem Grund muss man dann meist doch wieder auf die Darstellung der Unicode Zeichen zurückgreifen.

Iconvault

Bei Iconvault handelt es sich nicht im eigentlichen Sinne um eine Webfont bzw. IconFont, sondern um einen Service zum generieren von IconFonts, hier lädt man einfach seine eigenen SVG Dateien hoch und kriegt eine fertig generierte IconFont. Hier ist auch ein wunderschönes Beispiel für eine mehrfarbige IconFont hinterlegt, und zwar Forecast Font hierbei handelt es sich um eine Schrift für die Wetterdarstellung, z.B. für Wettervorhersagen oder für die Darstellung des aktuellen Wetters. Hier ist auch im CSS beschrieben wie man mehrfarbige Darstellung von Icons erreichen kann.

Fontello

Ein weitere IconFont generator ist Fontello hier kann man aus diversen vorgefertigen Fonts sich seine Wunschschrift zusammenstellen und auch eigene Icons einstellen. Ein großer Vorteil von Fontello gegenüber Iconvault ist das man die Möglichkeit hat bereits generierte Icon Sets nachträglich anzupassen, und auch die Adressen der Icons nach Bedarf anzupassen, dies ist die größte Schwachstelle bei Iconvault. Es ist also moglich Schriften die man einmal generiert hat zu erweiteren, gerade dies macht es sehr attraktiv für den produktiven Einsatz.

Schreibe einen Kommentar

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