Skip to main content

Fonts

Fonts can be used to imbue your game with personality. For example, you could use a handwritten script font to give a sense of reading the diary entries of fallen heroes, or a pixelated font to give a retro feel to your game.

Declaring Fonts​

First, you need to add your font files to your project. Font files are normally in ttf, otf, or woff format, and can be added to your project in the same way as other assets like images or audio files.

Next, declare a font using the font keyword:

pub font Font:Roboto(
    regular=@roboto.ttf,
    bold=@roboto-bold.ttf,
    italic=@roboto-italic.ttf,
    boldItalic=@roboto-boldItalic.ttf,
)

When declaring a font, there are four optional parameters, one for each style of the font:

  • regular: The regular style of the font.
  • bold: The bold style of the font.
  • italic: The italic style of the font.
  • boldItalic: The bold italic style of the font.

Any of these styles can be omitted. For example, if you only use the regular and bold styles, you can declare the font like this:

pub font Font:Roboto(regular=@roboto.ttf, bold=@roboto-bold.ttf)
tip

Only include the styles you need, to reduce the download size of your game.

Variable Fonts​

Some fonts are variable fonts, which means a single font file can be used for multiple styles. For example, the font Geomini is available as a variable font that can be used for both regular and bold styles. In this case, you can simply provide the same file for both the regular and bold styles:

pub font Font:Geomini(regular=@geomini.ttf, bold=@geomini.ttf)

Using Fonts​

Many UI elements, as well as TextSprite, support the font parameter:

P(font=Font:Geomini, fontSize=3) {
    Span(font=Font:Roboto) { "Hello" }
    ", world!"
}

Button(font=Font:Geomini) { "Click Me" }

Panel(font=Font:Geomini) {
    P { "Hello, world!" }
}

TextSprite("Hello, world!", font=Font:Geomini, fontSize=1.5)

Default Fonts​

The constants Font:Body and Font:Heading are special constants that can be used to get or set the default font for body text and headings, respectively. See Reference > UI Elements > Font.

For example, this is how you would make a TextSprite use the default heading font:

TextSprite("Hello, world!", font=Font:Heading, fontSize=1.5)

If you declare your own constant with the name Font:Body or Font:Heading, it will set the default font for your game. For example:

pub const Font:Body = Font:Geomini

Supported Font Formats​

The following font file formats are supported:

  • TrueType Font (.ttf)
  • OpenType Font (.otf)
  • Web Open Font Format (.woff, .woff2)

The Web Open Font Format is a compressed format that is optimized for use on the web, and so is the format that is recommended for use in your game.

Where to Get Fonts​

You can find free fonts on websites like Google Fonts. Make sure to check the license of the font to ensure it can be used in your project.