The advantage of fonts over images

-->

Imagine your boss wants you to create an application with iconic buttons, He has an image that is to be used for menu buttons, and for the landing page, and as an image on some pages.

You start editing the image with photoshop creating the neccesary images. After some time you are ready. Some days later your boss says, there has bene a feedback session with the user and they want the buttons changed, different color with gradient effect and rouneded corners, and they should be a bit larger:

Again you start up PhotoShop and change the images. And you are lucky if this is the only time the specifications change.

All this image editing could be avoided when you would use images from a font. In a previous post I described how to create iconic buttons using existing fonts.  But it is also possible to define your own custom font containing the images you need ( how do you think Font Awesome is made?). 

Above appearances are all images generated using CSS and only one character in a custom font ( unfortunately I am not able to load the font in this blog).

The images you see in this blog are font characters styled with CSS. It is very easy to change the color and size of the image or the background, just change the CSS properties.

When you have a single color image you can incorporate it in a font. You need the image in SVG format, You can use tools like Inkscape to convert your image to SVG.

With your images in SVG you can build a font from them using icomoon.

It takes some time and effort to creatie a custom font. I did not have the time nor the patience to do it so I asked my 17-year old son Michiel to do it for me. He is  very good at this kind of thing (amongst others) and he has introduced me to many interesting new developments, like AngularJS and NodeJS. If you can use his help you can reach him here.