11:30 AM 11:30 AM11:30 AM
 

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: 
http://kvazars.com/littera/
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:

MyCustomFont-export

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

Glyph-Designer_1

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

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

  29 Responses to “[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. Hey Thanks,
    Can you provide a screenshot?
    What software do you use?

  3. The solution to Peter’s problem was changing the font-export’s texture type to “Sprite (2D and UI)”.

    With just the texture type set as texture, the font gets messed up. http://imgur.com/k84omLY,jIH4wkQ

    After setting the texture type to Sprite (2D and UI)
    http://imgur.com/k84omLY,jIH4wkQ#1

  4. 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.

  5. 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.

  6. 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!

  7. 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

  8. Hello,

    UPDATE : Unity 5.x, I update the script but there is an issue with the space interline.

  9. Hello,

    UPDATE : Unity 5.x, I update the script but there is an issue with the space interline.

  10. Hello,

    UPDATE : Unity 5.x, I update the script but there is an issue with the space interline.

  11. When you say there’s a problem with interline, do you mean how it types over itself and wordwrap doesn’t work?

  12. 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.

  13. 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!

  14. Could you add support for xml files exported by Littera bitmap font generator (very cool piece of software, 100% free and doesn’t need additional steps like using Photoshop) http://kvazars.com/littera/

  15. By the way the font could only works on TestMesh but not on UI Text.

  16. 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).

  17. 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.

  18. It no longer works. The script offsets the rects and the result is useless. It’s a shame :/

    Please reply if you intend to fix it anytime soon.

  19. 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.

  20. Is this still working?? I did try the advanced Texture Type still not working. Any help?? Im on Unity 5.3

  21. Seems that it doesn’t work with 3D text?

  22. I tried this, but it doesn’t work, I keep having an empty rectangle…

  23. Hi,

    I have issue:
    Font size and style overrides are only supported for dynamic fonts.
    UnityEngine.Canvas:SendWillRenderCanvases()

    Exist solution?

  24. It works in Unity 5.4.1f1.
    But I have to set the font size to 14 and set the color to white color
    in order to see my custom font original color.

    @Benoit Freslon
    https://www.assetstore.unity3d.com/#!/content/62128

    lite3/Unity-BitmapFontImporter

    This software works too. Only different is the color more beautiful.
    But have to set the setting I mentioned above.
    Thank you.

  25. I had it working before, but now on Unity 5.5.0f3 the text doesn’t show up. Any ideas?

  26. Use the Unity asset instead now ;)

  27. Very interesting thoughts!

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)