Webfont Dateien mit Grunt-Webfont zusammenstellen

Möchte man seine Webseite mit Icons auf hübschen bieten sich verschiedene Möglichkeiten an. Neben dem klassischem Ansatz von Grafikdateien gibt es auch die Möglichkeit diese Icons in Fontdateien zu verteilen. Iconfontdateien haben den Vorteil, dass man sie über CSS Angaben formatieren kann und das sie sich auch verlustfrei skalieren lassen.

Es gibt einige Icon Fonts die sich kostenlos oder gegen Gebühr verwenden lassen. Ungünstig ist allerdings, dass man für ein oder zwei Icons immer dem gesamten Font bereitstellen muss und dann vielleicht auch noch mehrere dieser Fonts.

Mithilfe des Grunt Plugins grunt-webfont kann man recht einfach verschiedene Icons im SVG Format in einer Fontdatei zusammenfassen.

Die Installation ist recht einfach:

 npm install grunt-webfont
 sudo apt-get install fontforge ttfautohint

Seiner Gruntfile.js muß man nur folgende Zeilen hinzufügen

 webfont: {
    icons: {
        src: '_icons/*',
        dest: 'fonts',
        destCss: '_sass',
        options: {
            stylesheet: 'scss',
            relativeFontPath: '/fonts'
            }
        }
    }

Jetzt kann man die Icons die man haben möchte in das Verzeichnis _icons kopieren und man bekommt die Fontdatei in das Verzeichnis fonts kopiert. Da ich sass verwende bekomme ich die CSS Anweisungen so erstellt, das ich sie direkt in meinen Grunt Workflow einbauen kann.