[Tutorial][Unity] Generate and import a bitmap font with a free tool

[Tutorial][Unity] Generate and import a bitmap font with a free tool

In this tutorial I will show you how to generate and import bitmap fonts in Unity3D with ShoeBox and GlyphDesigner.

UPDATE 07.07.2016: An Unity asset store plugin can convert your bitmap fonts for free: https://github.com/lite3/Unity-BitmapFontImporter
UPDATE 11.17.2015: Littera is an online tool. It works great and it’s free: 
UPDATE: Unity 5.x, I updated the script but there is an issue with the space interline.

EDIT: GitHub repository

You can use your own custom font in your Unity games like this:


Capture d’écran 2015-03-22 à 22.15.51

First of all we need to export a .xml file and a .png file.

You will also need this piece of code to generate a font compatible with Unity. I modified and found this C# script in the Unity forum.

Download and add this C# script in your Unity Assets folder: GitHub zip

The softwares

It exists several applications to export a bitmap font with a .xml file but in this tutorial we will use ShoeBox and GlyphDesigner:

Export a bitmap font with ShoeBox

Capture d’écran 2015-03-22 à 22.18.34

Capture d’écran 2015-03-23 à 11.46.51

ShoeBox is a free Adobe Air based app for Windows and Mac OSX with game and ui related tools. Each tool uses a drag and drop or clipboard interaction for a quick workflow.

How to generate the required files to import your custom font with ShoeBox?

  • Download and Install ShoeBoxhttp://renderhjs.net/shoebox/
  • You can use my custom font in this .psd file: MyCustomFont.psd
  • Watch this video bellow but export with the template: FNT-xml Starling. Yes! Starling! :). The BitmapImporterScript.cs script needs a .XML file format.

Capture d’écran 2015-03-22 à 22.24.25

The video tutorial:

  • Import the .xml and the .png files in your Unity Assets folder.

Capture d’écran 2015-03-22 à 22.06.14

Follow the next step of the tutorial in the next chapter after this one.

Export a bitmap font with GlyphDesigner



Glyph Designer is a powerful bitmap font designer. Create beautiful designs using highly configurable effects, definable backgrounds and more. Make the most of your screen with smart zooming and full screen support. Target hundreds of devices on multiple platforms with support for over 15 frameworks out the box. Streamline localizations with GDCL.

How to generate the required files to import your custom font with GlyphDesigner?

  • Download and install GlyphDesigner for Mac or Windows
  • Create your own custom bitmap font with all the glyphs you need
  • Click on the Export button
  • And select Export Type > .xml (BMFont XML)

Capture d’écran 2015-03-23 à 11.52.15

  • Click Save
  • Import the .xml and the .png files in your Unity Assets folder.

Capture d’écran 2015-03-23 à 11.57.44

Follow the next step of the tutorial in the next chapter.

Import and use the bitmap font in Unity

Capture d’écran 2015-03-22 à 22.50.37

  • Import the BitmapFontImporter.cs file in your Unity Assets folder.
  • Then do a Right Click on the .xml file
  • Click Generate Bitmap Font
  • The Script should generate a .material and a .fontsettings file
  • Now we use the font you just created in your scene
  • Create an UI > Text game object in your scene
  • Select the UI Text game object
  • In the inspector go to the Text (Script) component and add the .fontsettings file in the Character >Font field
  • Then add the .mat file in the Material field
  • Never use the Font Size value in the component but use the Scale of the game object instead


28 thoughts on “[Tutorial][Unity] Generate and import a bitmap font with a free tool

  1. Great tutorial, I am following along, and I am using your font. i have everything imported ok, and generated. Everything looks beutiful except, each character is like “cut 2/3 and the extra 1/3 is stacked on top”. it is some sort of wrapping offset issue. Any ideas?

  2. Worked great, this really just needs to be added to ShoeBox to make it a one step process. Three issues:
    1) Spaces were huge, I just fixed it manually by finding the ASCII code and adjusting the width. Just mentioning if it is a common problem.
    2) The alignment of my text paragraph is responding oddly in the vertical direction such that there is always a huge gap before the first line of text from the top of the text box. I can move stuff around but it is odd.
    3) Text wrap no longer works and text just starts at the beginning of the same line and overwrites stuff. This is a bit more of a problem.

  3. Issues Fixed and due to ShoeBox:
    2) Needed to increase the line spacing of the font from 0.1 to ~12
    3) So somehow the Vert Y value of every character got increased by a value of 70 by ShoeBox when exporting the XML. Just decreased everything by 70 and then it was correctly spacing.

    One odd thing is that there are twice the number of characters and every other character is empty. I believe this to be an issue with this script and not ShoeBox, though it doesn’t affect anything.

  4. Great tut and excelent code, I’m using it right now!
    I have a question, I’m trying to change the space between letters, I’ve tried modifying the xml file or the .fontsettings properties but nothing worked, the font looks always the same. Is there a way to control the font kerning? Thank you!

  5. I had the same problem as peter. tried navx2810 solution but I can’t see the type texture “Sprite (2D and UI)” just Default and Difuse. I’m using unity 5

  6. I was having a similar problem as Peter, but only with WebGL builds. Running Unity 5 now. My texture type, for my text image file, was already on “Sprite (2D and UI)”. However, changing it to “Editor GUI and Legacy GUI” got the font to still look crisp and work in WebGL.

  7. Really great tutorial, with a clear step-by-step program on how to start it!
    I’ve completed my fonts with illustrator and shoebox, and I’ve exported the files to, both the xml and the png.

    However, for some reason, the script shows up with errors, and no .material or .fontsettings shows up.

    What am I doing wrong? How can I fix this?

    Thank you very much in advance!

  8. But it clearly works on UIText in the tutorial! See, image after font texture. Also, Littera-exported fonts doesn’t work with Text Mesh either (which is I think depreciated and I had to look around really hard to add it as component).

  9. Font Working Fine with Android.
    Font Get Messup With Some ios Device.i tested in ipad and iphone4 its not working on this device.
    ipad4 working well.

  10. Never mind I figured it out. You have to change the texture so that it doesn’t resize to a power of two. Set texture type to advanced and you’ll find it near the top.

Leave a Comment