My take on a Webfonts Generator

I was a happy user of fontsquirrel.com for a few years. I used their webfont generator and was quite happy with their output - except that I had to manually ‘fix’ the font names so I am able to use that font like a native one in my CSS. But someday, FontSquirrel made ridiculous descision to limit the generator to only 4 files.

This made me create my own one. It looks way better than FontSquirrel’s and has a nice tweak: It automatically fixes fonts.

When generating a webfont, you often stumble upon silly font names. For example: Din Pro. Every font normally has a family name (in DIN Pro’s case that would be DIN Pro), a sub-family (i.e. “Medium”) and a flag if it is italic. Not DIN Pro. It always uses ‘Regular’ as its sub-family name and “DINPro-Medium”, “DINPro-Bold” etc. as its Family Names. Unfortunately, it is not alone. Many other fonts, including Open Sans, Proxima Nova and many others do the same. This has the affect of most generators throwing out names like ‘dinpro-medium-600.ttf’. Would you want to write that everytime you want to use it in your CSS?

This is where my generator starts to show its magic. It analyzes the font and normalizes their family names, subfamily names and even detects, if a font is italic or condensed. It then generates a nice and easy-to-use stylesheet, i.e.:

@font-face {
    font-family: 'DIN Pro';
    font-weight: 400;
    font-stretching: condensed;
    font-style: normal;
}

This would let you use ‘DINProRegularCondensed’ just like any other font. This makes it dead-simple.

FontSquirrel and 99% of the other generators also still create SVG and other font types. This obviously increases the weight of your font package. However, for about a year now, browsers do not need that anymore. Every browser (including IE!) is able to use ttf and otf fonts (there is one catch for IE, though: It needs an ‘installable’ flag, which my generator appends). So my little generator not only works best for CSS but also does not create as much overhead as others.

Head on over to webfonts.gidix.net and try it out! It’s completely free and easy to use.