Drawing Text with a Sprite

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

Overview

MonoGame provides a quick and easy method for drawing text using any registered Font file installed on the development PC, this is not needed in the final game as the true type font is converted into a texture for rendering, making the process easy and seamless.

End result

The output of this tutorial

Adding a Sprite Font and Drawing Text

Open your Content.mgcb file using the MGCB Editor and click New Item Button.
In the Add New Item dialog box, select SpriteFont Description and set the filename to "MyMenuFont" in the edit box at the top of the dialog.

Note

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 (keeping the .spritefont file extension). The friendly name identifies the font once it is installed on your computer, for example, Courier New or Times New Roman. When you reference the font in your code, you must use the friendly name you have assigned it. Pipeline tool creates a new .spritefont file for your font.
Double-click on your new font file in the MGCB Editor which will open the SpriteFont text file in your default editor. Alternatively, you can right-click and select Open With to choose a different editor.
By default the font Arial will be used by the SpriteFont configuration, to change this to another installed font simply type the friendly name of the font to load into the FontName element. For the purposes of this tutorial, I have set the Font size to 54 and left the rest of the SpriteFont settings as the default.

Important

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 view the installed fonts on your machine in the Settings -> Personalization -> Fonts configuration on your Windows machine (or relevant place on Mac /Linux) or to install new ones.

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. When you reference the font in your code, you must use the friendly name you have assigned it.

> [!NOTE]
> If you want to use a custom font, you should put the `.ttf` or `.oft` in the same directory as the `.spritefont` file and the build system will pick it up. There is no need to install the font system wide.

If necessary, change the Size entry to the point size you desire for your font.
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.
Specify the character regions to import for this font.

Note

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 an &# prefix. The default character region includes all the characters between the space and tilde characters, inclusive.

To draw text on the screen

Add a Sprite Font to your project as described above.
Create a SpriteFont reference to encapsulate the imported font.
Create a SpriteBatch object for drawing the font on the screen.
In your Game.LoadContent method, call ContentManager.Load, specifying the SpriteFont class and the asset name of the imported font.

Create your SpriteBatch object, passing the current GraphicsDevice.

    // The Sprite Font reference to draw with
    SpriteFont font1;

    // The position to draw the text
    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>("MyMenuFont");
        Viewport viewport = _graphics.GraphicsDevice.Viewport;

        // TODO: Load your game content here            
        fontPos = new Vector2(viewport.Width / 2, viewport.Height / 2);
        }

In your Game.Draw method, call SpriteBatch.Begin on the SpriteBatch object.
If necessary, determine the origin (center) of your text.

If you want to draw your text centered on a point, you can find the center of the text by calling SpriteFont.MeasureString and dividing the returned vector by 2.
Call SpriteBatch.DrawString to draw your output text, specifying the SpriteFont object for the font you want to use.

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

Call SpriteBatch.End after all text is drawn.

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    _spriteBatch.Begin();

    // 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);

    _spriteBatch.End();
    base.Draw(gameTime);
}

Table of Contents

Drawing Text with a Sprite

Overview

End result

Adding a Sprite Font and Drawing Text

Note

Important

Note

To draw text on the screen

See Also

Concepts

Reference