Phlow Blog
Neues aus Webdesign, Social Media & Journalismus
Icon Fonts mit Font Custom erstellen

Icon Fonts

Icon Fonts mit Font Custom erstellen

Mit der Open Source-Software Font Custom erstellt man sich maßgeschneiderte Icon Fonts, die man für eigene Webdesign-Projekte nutzen kann.

Icon Fonts bieten eine großartige Möglichkeit Websites mit vektorbasierten Icons zu verschönern. Da es sich um einen Schriftdatei handelt, kann diese auch mit den üblichen CSS-Eigenschaften wie z.B. hover, text-shadow, color und ähnlichem gestaltet werden.

Zahlreiche Icon Fonts wie z.B. Font Awesome oder der von mir geschätzte Entypo-Icon-Satz bieten oft viel zu viele individuelle Icons. Oft reichen ein paar wenige. Manchmal möchte man aus verschiedenen SVG-Icons auch einen individuellen Icon Font für eigene Projekte erstellen.

Natürlich bietet das Web zahlreiche Online-Services wie z.B. icomoon.io, fontastic.me oder fontello.com über welche man sich seine eigenen Icon Fonts im Browser zusammenklicken kann. Persönlich mag ich aber den direkten Zugriff auf die Dateien und genau das bietet Font Custom.

Preview des Icon Fonts
Preview des Icon Fonts

Font Custom installieren

Font Custom installiert man mit Brew in drei Schritten.

brew install fontforge –with-python

brew install eot-utils

gem install fontcustom

Font Custom nutzen

Zu anfangs irritierte mich die Anleitung auf der Website von Font Custom ein wenig. Darum hier die eigentlich einfachen Schritte, um sich den eigenen Icon Font zusammenstricken zu lassen.

  1. Terminal öffnen.
  2. Verzeichnis mit mkdir custom-font erstellen
  3. In das Verzeichnis mit cd custom-font wechseln.
  4. Mit fontcustom config die Standard YAML-Konfigurationsdatei erstellen.
  5. Konfigurationsdatei fontcustom.yml öffnen, konfigurieren, speichern.
  6. SVG-Dateien in das Verzeichnis custom-font kopieren.
  7. Font Custom im Terminal mit fontcustom watch starten.

Dank des Watch-Vorgangs läuft jetzt Font Custom im Hintergrund und erzeugt eine neue Version des Fonts sobald man eine neue SVG-Vektor-Datei in das in fontcustom.yml definierte Verzeichnis wirft.

Sehr gut an Font Custom finde ich die zusätzlich erzeugte HTML und CSS-Datei, die den Font im Einsatz zeigt.

Autor: Moritz »mo.« Sauer
9. Februar 2015