Up to date

This page is up to date for Godot 4.1. If you still find outdated information, please open an issue.

Using Fonts¶

Godot allows you to set specific fonts for different UI nodes.

There are three different places where you can setup font usage. The first is the theme editor. Choose the node you want to set the font for and select the font tab. The second is in the inspector for control nodes under Theme Overrides > Fonts. Lastly, in the inspector settings for themes under Default Font.

If no font override is specified anywhere, Open Sans SemiBold is used as the default project font.

Note

Since Godot 4.0, font sizes are no longer defined in the font itself but are instead defined in the node that uses the font. This is done in the Theme Overrides > Font Sizes section of the inspector.

This allows changing the font size without having to duplicate the font resource for every different font size.

There are 2 kinds of font files: dynamic (TTF/OTF/WOFF/WOFF2 formats) and bitmap (BMFont .fnt format or monospaced image). Dynamic fonts are the most commonly used option, as they can be resized and still look crisp at higher sizes. Thanks to their vector-based nature, they can also contain a lot more glyphs while keeping a reasonable file size compared to bitmap fonts. Dynamic fonts also support some advanced features that bitmap fonts cannot support, such as ligatures (several characters transforming into a single different design).

Tip

You can find freely licensed font files on websites such as Google Fonts and Font Library.

Fonts are covered by copyright. Double-check the license of a font before using it, as not all fonts allow commercial use without purchasing a license.

Dynamic fonts¶

Godot supports the following dynamic font formats:

TrueType Font or Collection (.ttf, .ttc)
OpenType Font or Collection (.otf, .otc)
Web Open Font Format 1 (.woff)
Web Open Font Format 2 (.woff2, since Godot 3.5)

While .woff and especially .woff2 tend to result in smaller file sizes, there is no universally "better" font format. In most situations, it's recommended to use the font format that was shipped on the font developer's website.

Bitmap fonts¶

Godot supports the BMFont (.fnt) bitmap font format. This is a format created by the BMFont program. Many BMFont-compatible programs also exist, like BMGlyph.

Alternatively, you can import any image to be used as a bitmap font. This is only supported for monospaced fonts (fonts where each character has the same width). To do so, select the image in the FileSystem dock, go to the Import dock, change its import type to Font Data (Monospace Image Font) then click Reimport:

Changing import type to Font Data (Monospace Image Font) — Changing import type to **Font Data (Monospace Image Font)**¶

The font's character set layout can be in any order, but orders that match standard Unicode are recommended as they'll require far less configuration to import. For example, the bitmap font below contains ASCII characters and follows standard ASCII ordering:

Bitmap font example — Credit: LibreQuake (scaled and cropped to exclude extended range)¶

The following import options can be used to import the above font image successfully:

Import options to use for the above example font¶

The Character Ranges option is an array that maps each position on the image (in tile coordinates, not pixels). The font atlas is traversed from left to right and top to bottom. Characters can be specified with decimal numbers (127), hexadecimal numbers (0x007f) or between single quotes ('~'). Ranges can be specified with a hyphen between characters.

For instance, 0-127 (or 0x0000-0x007f) denotes the full ASCII range. As another example, ' '-'~' is equivalent to 32-127 and denotes the range of printable (visible) ASCII characters.

Make sure the Character Ranges option doesn't exceed the number of Columns × Rows defined. Otherwise, the font will fail to import.

If your font image contains margins not used for font glyphs (such as attribution information), try adjusting Image Margin. This is a margin applied only once around the whole image.

If your font image contains guides (in the form of lines between glyphs) or if spacing between characters appears incorrect, try adjusting Character Margin. This margin is applied for every imported glyph.

Loading a font file¶

To load a font file (dynamic or bitmap), use the resource dropdown's Quick Load or Load option next to a font property, then navigate to the font file in question:

../../_images/using_fonts_load_font.webp — Loading a font file¶

You can also drag-and-drop a font file from the FileSystem dock to the inspector property that accepts a Font resource.

Warning

In Godot 4.0 and later, texture filter and repeat properties are defined in the location where the texture is used, rather than on the texture itself. This also applies to fonts (both dynamic fonts and bitmap fonts).

Fonts that have a pixel art appearance should have bilinear filtering disabled by changing the Rendering > Textures > Canvas Textures > Default Texture Filter project setting to Nearest.

The font size must also be an integer multiple of the design size (which varies on a per-font basis), and the Control node using the font must be scaled by an integer multiple as well. Otherwise, the font may look blurry. Font sizes in Godot are specified in pixels (px), not points (pt). Keep this in mind when comparing font sizes across different software.

The texture filter mode can also be set on individual nodes that inherit from CanvasItem by setting CanvasItem.texture_filter.

Font outlines and shadows¶

Font outlines and shadows can be used to improve readability when the background color isn't known in advance. For instance, this is the case for HUD elements that are drawn over a 2D/3D scene.

Font outlines are available in most nodes that derive from Control, in addition to Label3D.

To enable outline for a font on a given node, configure the theme overrides Font Outline Color and Outline Size in the inspector. The result should look like this: