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. 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 instructions 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";
    }
}