Font Handling

Elements such as Text and TextInput can render text and allow customizing the appearance of the text through different properties. The properties prefixed with font-, such as font-family, font-size and font-weight affect the choice of font used for rendering to the screen. If any of these properties isn’t specified, the default-font- values in the surrounding Window element apply, such as default-font-family.

The fonts chosen for rendering are automatically picked up from the system running the application. It’s also possible to include custom fonts in your design. A custom font must be a TrueType font (.ttf), a TrueType font collection (.ttc) or an OpenType font (.otf). You can select a custom font with the import statement: import "./my_custom_font.ttf" in a .slint file. This instructs the Slint compiler to include the font and makes the font families globally available for use with font-family properties.

For example:

import "./NotoSans-Regular.ttf";

export component Example inherits Window {
    default-font-family: "Noto Sans";

    Text {
        text: "Hello World";
    }
}

slint

Fonts on embedded and bare-metal targets

The fonts used for rendering are automatically picked up from the operating system running the application. On embedded or bare-metal targets that use the software renderer and have no operating system, no system fonts are available. On these targets you must embed every font your application uses by importing it as shown above.

Embedding the fonts (and pre-rendering their glyphs) is enabled through the compiler’s resource-embedding setting:

• Rust: in your build script, pass EmbedResourcesKind::EmbedForSoftwareRenderer to CompilerConfiguration::embed_resources().
• C++: set the SLINT_EMBED_RESOURCES CMake target property (or the DEFAULT_SLINT_EMBED_RESOURCES cache variable) to embed-for-software-renderer.

When embedding glyphs for the software renderer, the compiler pre-renders them at the pixel sizes your .slint files use. If some font sizes are only known at run time, set the SLINT_FONT_SIZES environment variable at compile time to a comma-separated list of pixel sizes (for example SLINT_FONT_SIZES=12,16,24) so glyphs are pre-rendered at those sizes as well.

To reduce the binary size on systems with limited flash memory, glyphs can be embedded as Signed Distance Fields (SDF) ↗ instead of pre-rendered bitmaps, trading some rendering quality for a smaller footprint. Enable it with CompilerConfiguration::with_sdf_fonts() (Rust, requires the sdf-fonts Cargo feature), or by setting SLINT_EMBED_RESOURCES to embed-for-software-renderer-with-sdf (C++, requires the SLINT_FEATURE_SDF_FONTS feature).

On targets that do have an operating system, enable the software-renderer-systemfonts cargo feature to let the software renderer also use fonts installed on the system.