Webfont generator

[Kevin Ingwersen (Ingwie Phoenix)]

Hey.

While reducing the size of my CSS and JS that is served, I realized that I really was having more Font Awesome icons in stock than I ever needed. Turns out that I was only using 7% of their icons. So I decided that I wanted to make my own WebFont.

…but how to automate it? Especially since I want to support at least IE8 but even better IE7. I know too many people that use that c*** still…

In order to do so, I was thinking of this:

My JS code detects if IE greater-or-equal 8 and loads my normal icon pack.

But if it is lower, then it should load a CSS that has a png sprite instead. And of course, blare at my client to update or switch!

So how to generate the two variants? Let’s go with the easier one, the webfont typical one. I have a bunch of SVG icons in a folder, and now I want to mass-convert it. Which tool do you guys use for that?

Next, I’d need to convert my SVG font to EOT, WOFF, and WOFF2.

And once that is down, create a nice CSS from my SVG font and have it include my converted fonts.

Now for the spriting…

Take these SVG icons and convert them to a png sprite. I just saw a nice NPM package for that.

Create CSS with the proper spriting.

All clear. I think there is nothing wrong on this workflow (however, if you think there is, let me know!)…but what do I do now? I do not use GULP or Grunt. All I use is WebPack!

So does anyone have a suggestion about this?

Kind regards, Ingwie