Using Custom Fonts

You can load custom fonts to Qt Design Studio and use them in your UIs. To make the fonts appear in the Design mode, you must manually call them from a QML file or add them to the Constants.qml file of the project.

Qt Design Studio deploys the fonts to devices when you preview the UI.

Note: Use fixed-width fonts if you plan to animate running numbers, so that they do not appear to jump around the screen when they change.

Importing Fonts

For your UI to use custom fonts when you preview it on a device, you have to import the fonts to the project folder. Qt Design Studio deploys them to the device along with your UI.

To import fonts to Qt Design Studio projects:

"Add new font loader type"

  1. In the Project tab in the Navigator, right-click the subfolder with the same name as the project in the Import folder, and select Add New in the context menu.
  2. Select QML Files > FontLoader > Choose.
  3. In the Component name field, enter the name of the font.
  4. In the Font field, enter the path to the font file or select Browse to locate the file.
  5. Open the Constants.qml file for editing.
  6. Remove the comment markers and edit the following line to add the source of your custom font:
    readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" }

    For example:

    readonly property FontLoader TitilliumWebBlack: FontLoader { source: "TitilliumWeb-Black.ttf" }

Repeat the above process for each font file you want to use. You can now use the fonts in the Design mode.

Using Fonts in UIs

To make the fonts appear in the Navigator in the Design mode, you must either manually call them once from any QML file or add the font name to the Constants.qml file of the project. You can then select the fonts in the properties of text labels.

  1. Open a QML file in the Text Editor tab and start typing the font name. Qt Design Studio autocompletes the name for you.

    The font loader item appears in the Navigator and you can select it to check the font name to use in the text properties.

  2. In the Properties view, Text tab, Font field, select the font to use.
  3. In the Font weight field, check that the font weight is correct.

Available under certain Qt licenses.
Find out more.