Using Hiero Font Tool to create a distance field font to use with shaders

This article is about text rendering with a 3D graphics library, like OpenGL. A regular font atlas texture doesn't scale well. To render text that looks sharp at any size, you need a distance field texture atlas. Hiero is a tool that can create such a font. It requires Java.

• Pick a font (system or file) and the characters you want (sample text).
• Set Rendering to Java, so the effects are listed.
• Remove the Color effect and add a Distance field effect.
• Set it's Scale to 15 and Spread to 10. This high scale will make the sample slow to regenerate, so maybe do this last.
• At the right-bottom, set X and Y to 0 and the four Padding values to 8.
• Increase or decrease the Size of the glyphs, so they all fit on one page.

Now you can save the font. Hiero will create a png image of the glyphs and a fnt file describing their positions and sizes. With these, you can generate textured quads for your text. A specific fragment shader will use the distance fields in the texture to render sharp text.