Loading Fonts in XNA

Starting with XNA GS 2.0, you can load True Type and OpenType fonts into your XNA project easily. Here’s how to do it.

Loading fonts for use in a game project can be quite a pain. In some of the better game engines (the terrific DX9 2D Haaf’s Game Engine comes to mind), you’ll get a font-to-bitmap converter, which builds a bitmap out of your font, along with a definition file explaining how to traverse the bitmap in order to get the character you are requesting. If you aren’t lucky enough to be using an engine that has this functionality built in, well… you have to do it yourself.

Luckily, XNA now has this functionality built in. All you need to do is let XNA know a little bit of info about the font you want to use, and it does the rest.

Here’s what you need to do:

1. Right click your Content folder, select Add, then New Item.
2. Select Sprite Font from the options list, and give it a name. IMPORTANT: the name of the sprint font you create should be the friendly name of the font you want to use. So for example, if you want to add the Georgia font, name your sprint font Georgia.sprintfont — don’t get clever here.
3. You’ll now have a sprintfont element in your content folder. Double click it to open the XML file that XNA creates for you.
4. Now look for the FontName tag. Again, enter in the friendly name of your font. So using the Georgia font, enter <FontName>Georgia</FontName> here.
5. Save your project. You’ve now imported your font.

Now, how do we use it? XNA provides a class to manage sprint font files for us. The class name is…. SpriteFont.

Here’s how to load the font in code:

SpriteFont font = content.Load(”Georgia”);

Note that again we are loading our font using the friendly name.

Now, how do we use it? Well, it’s a SpriteFont, so you may have correctly guessed that we use the SpriteBatch to draw it:

spriteBatch.Begin();
spriteBatch.DrawString(font, "Insert Text Here", new Vector2(150,150), Color.Black);
spriteBatch.End();

The above code will use our Georgia font to render the text Insert Text here at screen position 150,150 in the color black.

And that’s all there is to it!