Skip to content

Setting Up Fonts

Bartłomiej Dach edited this page May 1, 2024 · 5 revisions

This tutorial assumes you have completed setting up your first project and setting up compiled resource stores.

In this tutorial, you will learn how to add custom fonts into your game and use it:

Converting to binary font and texture files

For the custom font to be recognized inside osu!framework, you will have to convert it into a binary font with texture files alongside it.

To start off, you'll need to download and install BMFont by AngelCode for converting the font, then run it and load this configuration for selecting required character range:

Load the required configurations #1 Load the required configurations #2

Next, you have to set up the tool into using and converting your custom font properly by going into the font settings and selecting your custom font and check/uncheck Bold and Italic, and going into the export settings and selecting Binary as the font descriptor. Without it, your game might hard crash when loading the font.

Set up tool settings #1 Set up tool settings #2
Set up tool settings #3 Set up tool settings #4

And lastly, converting the font can be accomplished by clicking on Save bitmap font as and saving it wherever you want inside your Resources folder, which then will be pointed out to later on:

Save binary font #1 Save binary font #2

The font file name should be saved in the following pattern:

FontUsage.Family FontUsage.Weight FontUsage.Italics Font file name
MyAwesomeFont "Light" false MyAwesomeFont-Light
MyAwesomeFont "Bold" true MyAwesomeFont-BoldItalic
MyAwesomeFont null false MyAwesomeFont
MyAwesomeFont null true MyAwesomeFont-Italic

Adding the custom font to the font store

To use the custom font inside your game, you'll need to add it to the FontStore by specifying:

  • The resource store of your resources folder that contains the binary fonts.
  • The asset name of the binary font, The font path should be specified here relative from the resource store you've specified. (Fonts/MyAwesomeFont for this tutorial)

Here's an example of adding a custom font included within a Resources folder inside the game project: (MyAwesomeProject.Game/Resources/Fonts/MyAwesomeFont)

namespace MyAwesomeProject.Game
{
    public class MyAwesomeGame : osu.Framework.Game
    {
        [BackgroundDependencyLoader]
        private void load()
        {
            // Add the DLL resource store of this game project into the global resources store.
            Resources.AddStore(new DllResourceStore(@"MyAwesomeProject.dll"));

            // Add the custom font to the global font store (Fonts).
            AddFont(Resources, @"Resources/Fonts/MyAwesomeFont");
        }
    }
}

If you have specified a custom size for the font you've exported, you'll need to apply scale adjustments for its font store to match text sizing with different added fonts, can be done by:

namespace MyAwesomeProject.Game
{
    public class MyAwesomeGame : osu.Framework.Game
    {
        [BackgroundDependencyLoader]
        private void load()
        {
            // Add the DLL resource store of this game project into the global resources store.
            Resources.AddStore(new DllResourceStore(@"MyAwesomeProject.dll"));

            // Create a font store with providing a specific font size (200px for this example) 
            // to adjust scaling for matching up with different fonts.
            var scaleAdjustedFontStore = new FontStore(scaleAdjust: 200);

            // Nest the scale-adjusted font store inside the global font store 
            // for components such as sprite texts be able to retrieve the custom font.
            Fonts.AddStore(scaleAdjustedFontStore);

            // Add fonts of a same custom size (200px for this example) to the scale-adjusted font store.
            AddFont(Resources, @"Fonts/MyAwesomeFont", scaleAdjustedFontStore);
        }
    }
}

Warning: Certain font names may end up getting mangled by the .NET embedded resource machinery. For instance, numbers may be prefixed with underscores. See https://stackoverflow.com/questions/14705211/how-is-net-renaming-my-embedded-resources for more detail. A safe bet is to stick with letters.


Now you're almost done, by default, the first font to be added to your game will automatically be used for all SpriteTexts in your game, but you may want to use a specific font.

Using specific font for a sprite text

To use a specific font for a sprite text, all you have to do is construct a new FontUsage with:

Parameter Description Value in this tutorial
family The font name MyAwesomeFont
weight The weight of the font in string null
italics Whether the font is of italic type false

Check the font file name table example above for learning more.

There are also other FontUsage properties you can modify for rendering the font differently (e.g. size and fixedWidth)

This opens up for a lot of ways to implement the usage of your custom font, either by adding static properties for constructing the FontUsage or adding a static function with enumeration parameters that you can pick your font and its properties from, all based on your preference.

Here's an example of creating a sprite text using the custom font with size: 40f:

Code Preview
Clone this wiki locally