Blog: Tutorials, Tips & Tools

Icon fonts. Best way to generate custom font sets

If you are into responsive web design, you probably love icon fonts. Using icon fonts is the fastest and easiest way of rendering crisp and sharp icons on screens of any density. The only problem so far was choosing font library, which would have all the icons designer required.

Well, this problem is solved! Actually, has been a while ago, but may be you didn’t find out just yet:). Thanks to the awesome Fontello icon fonts generator, you can now combine fonts from several libraries into a customized font package. You get huge number of pictograms to choose from, and get a neat and small package of necessary ones when you’re done choosing.

Go to the website, choose your pictograms and you are ready to go click donwload… ALMOST.

Here’s a small, but very important tip: don’t skip the EDIT CODES tab. Go to that tab and look at the U+NNNN character codes in the cassettes. You will notice, that most of the characters have format U+NNNN, but some are U+1NNNN. Whenever you see U+1NNNN, click on it and CUT OFF THE “1”, so the code looks like “everyone else” – U+NNNN. This is important, because otherwise U+1NNNN will not display properly in Safari.

Designers complained about bugs in early IEs as well (surprise, huh!). But cutting off initial “1” seems to solve display problems universally.