Qt Quick Ultralite font_bindings Example

Demonstrates how to write bindings on font properties in Qt Quick Ultralite.


This example demonstrates how to write bindings on font properties. The binding support is available only when the Spark Font engine is used. The example's UI uses a slider control to change the text size, and switch controls to toggle the text style.

This example uses a fontmap file, which defines the following font class names:

  • "Roboto"
  • "Roboto Light"
  • "Roboto Italic"

It sets the QUL_DEFAULT_FONT_FAMILY CMake target property to "Roboto".

The font class name is updated whenever bindings are re-evaluated. See font class mapping for more information.

Text {
    text: "Hello world"
    // Depending on the 'italicSwitch.checked' value, the font class
    // name can be "Roboto" or "Roboto Italic".
    font.italic: italicSwitch.checked
    font.pixelSize: pixelSizeSlider.value

Text {
    text: "from Qt."
    // An alternativele way is to provide a full class name via font.family property.
    font.family: italicSwitch.checked ? "Roboto Italic" : "Roboto"
    font.pixelSize: pixelSizeSlider.value

The memory usage can be optimized by sharing the same font configuration (Text.font) across text items that use the same style.

Text {
    id: lightText
    text: "This text is displayed"
    font.pixelSize: pixelSizeSlider.value
    // Depending on the 'lightSwitch.checked' value, the font class
    // name can be "Roboto" or "Roboto Light".
    font.weight: lightSwitch.checked ? Font.Light : Font.Normal

Text {
    // To save the memory resources, the font configurations can be shared
    // between elements. This happens automatically in the emitted cpp code
    // when font configuration uses only constant values in font.* bindings.
    font: lightText.font
    text: "using the Monotype Spark font engine."

See also font properties documentation.


Available under certain Qt licenses.
Find out more.