Optimizing Games by Using Font Icons

For a couple of years now I've been using custom font packages to render generic icons in my Unity games. My most obvious example is Orbert, which has a minimalist design and allowed me to get away with quite a few font icons. It's very simple to do and has many benefits:

  • Optimizes game file size (less textures)
  • Optimizes memory consumption (less textures)
  • TrueType Fonts can scale to any size you need
  • There are tons of great free icons available for almost any scenario

1) Create a TrueType Font

The first thing you'll need to do is create a font containing the icons you wish to use. There are a number of great websites out there for doing this, I recommend http://fontello.com. Select the icons you want and then map each icon to a letter. On Fontello this is done under the 'Customize Code' tab and the letter goes in the top input box on each icon. For example you might want a Home icon, so maybe it makes sense to map it to the letter 'h'. Once you've mapped them all out you can download the package and import the TrueType Font into Unity.

2) Render Your Icons in Unity

In Unity create a UICanvas and create a child object containing a UIText component. On the component set the Font to your newly created icon font. Now under the Text field type in a letter corresponding to a code you chose to represent one of your icons. Going back to the example above, we would use 'h' to make the home icon appear.

Tips

I often find myself requiring additional icons throughout development. This means having to generate the same font again with the new icons added into it. Take care to ensure your letters map exactly the same way or else your icons could change to text or the wrong icon. If the website you're using has a way to save fonts you've created, I highly recommend doing so!

I also recommend adding a readme file to your project and including a bit about each icon and its corresponding letter it maps to. This will save you from frustration later and allow other contributors to understand the font without needing to go through the entire ASCII chart to figure out the codes!