How To: Draw Text

How To: Draw Text

Demonstrates how to import a SpriteFont into a project and draw text using DrawString.

As with most types of software, font files are licensed rather than sold. Font licenses vary from vendor to vendor, but most do not allow redistribution of the fonts. That includes redistribution of reproductions such as bitmaps containing the rasterized character set. This is true of many of the licenses covering fonts that Microsoft supplies with applications and the Windows operating systems. Therefore, be careful to ensure that you have the required license rights to redistribute any font you include as a bitmap containing the rasterized character set in your game!

The following list of fonts are installed by XNA Game Studio and are redistributable:

  • Kooten.ttf
  • Linds.ttf
  • Miramo.ttf
  • Bold Miramob.ttf
  • Peric.ttf
  • Pericl.ttf
  • Pesca.ttf
  • Pescab.ttf

These OpenType fonts, created by Ascender Corporation and licensed by Microsoft, are free for you to use in your XNA Game Studio game. You may redistribute these fonts in their original format as part of your game. These fonts were previously available only on the XNA Creators Club Online website.

The Complete Sample

The code in this topic shows you the technique. You can download a complete code sample for this topic, including full source code and any additional supporting files required by the sample.

Adding a Sprite Font and Drawing Text

To add a sprite font

  1. Right-click your Content project in Solution Explorer, click Add, and then click New Item.

  2. From the Add New Item dialog box, click Sprite Font.

    You may find it convenient at this point to change the name of the new file from "SpriteFont1" to the friendly name of the font you intend to load (leaving the file extension as ".spritefont"). The friendly name is the name that identifies the font once it is installed on your computer. For example, "Courier New" or "Times New Roman."

    XNA Game Studio creates a new .spritefont file for your font and opens it.

  3. If you did not name the new file with the font's friendly name, type the friendly name of the font to load into the FontName element.

    Again, this is not the name of a font file, but rather the name that identifies the font once it is installed on your computer. You can use the Fonts folder in the Control Panel to see the names of fonts installed on your system, and to install new ones as well. The content pipeline supports the same fonts as the System.Drawing.Font class, including TrueType fonts, but not bitmap (.fon) fonts. You may find it convenient to save the new .spritefont file using this friendly name.

  4. If necessary, change the Size entry to the point size you desire for your font.

  5. If necessary, change the Style entry to the style of font to import.

    You can specify Regular, Bold, Italic, or Bold, Italic. The Style entry is case sensitive.

  6. Specify the character regions to import for this font.

    Character regions specify which characters in the font are rendered by the SpriteFont. You can specify the start and end of the region by using the characters themselves, or by using their decimal values with a &# prefix. The default character region includes all the characters between the space and tilde characters, inclusive.

To draw text on screen

  1. Add a Sprite Font to your project as described above.

  2. Create a SpriteFont object to encapsulate the imported font.

  3. Create a SpriteBatch object for drawing the font onscreen.

  4. In your LoadContent method, call ContentManager.Load, specifying the SpriteFont class and the asset name of the imported font.

  5. Create your SpriteBatch object, passing the current GraphicsDevice.

    SpriteFont Font1;
    Vector2 FontPos;
    protected override void LoadContent()
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);
        Font1 = Content.Load<SpriteFont>("Courier New");
        // TODO: Load your game content here            
        FontPos = new Vector2(graphics.GraphicsDevice.Viewport.Width / 2,
            graphics.GraphicsDevice.Viewport.Height / 2);
  6. In your Draw method, call Begin on the SpriteBatch object.

    If you select your own SpriteBlendMode, SpriteBlendMode.AlphaBlend is recommended.

  7. If necessary, determine the origin of your text.

    If you want to draw your text centered on a point, you can find the center of the text by calling MeasureString and dividing the returned vector by 2.

  8. Call DrawString to draw your output text, specifying the SpriteFont object for the font you want to use.

    All other parameters of DrawString produce the same effects as a call to SpriteBatch.Draw.

  9. When you have drawn all your text, call SpriteBatch.End.

    protected override void Draw(GameTime gameTime)
        // Draw Hello World
        string output = "Hello World";
        // Find the center of the string
        Vector2 FontOrigin = Font1.MeasureString( output ) / 2;
        // Draw the string
        spriteBatch.DrawString( Font1, output, FontPos, Color.LightGreen, 
            0, FontOrigin, 1.0f, SpriteEffects.None, 0.5f );
        base.Draw( gameTime );

Community Additions

© 2016 Microsoft