Add Font to Qt Quick Designer

  • Qt Champions 2016


    I would like to use FontAwesone in my application as a source of icon. And ofcoz Qt Creator do not bundle this font by default. Do it has a method to add a font to Qt Quick Designer so that it could render the font in Design mode (1) and selectable in “Properties” panel of Text item (2)?

    For (1), I have tried the following code

    import QtQuick 2.4
    Item {
        FontLoader {
            id: fontLoader
            source: "./fontawesome-webfont.ttf"
        Text {
            text: "\uf2b9" // Address book icon

    That would works and show a address book icon in Qt Quick Designer. However, if the FontLoader is moved to another component, it will fail.

    Ofcoz it do not make sense to place FontLoader to every component using FontAwesome. That is why I want to add a font to the designer.

    For (2), I can’t find any method yet. It will only show standard fonts like “Arial” , “Times New Roman"

  • Hi! Instead of adding a font to the Designer (I don't know how to do that), you can use a QML singleton. It looks a bit complicated at first sight, but don't worry :-)

    The name of the font I used is "Orange Juice 2.0", and the result looks like this:

    First of all, we have our main.qml and some component in SomeComponent.qml:


    import QtQuick 2.7
    import QtQuick.Controls 2.0
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: "Hello World"
        color: "black"
        SomeComponent {
            anchors.centerIn: parent


    import QtQuick 2.7
    import "." // <- This is part of the magic
    Rectangle {
        color: Style.background_color 
        width: 400
        height: 100
        Text {
            anchors.centerIn: parent
            text: "Orange Juice 2.0"
            font.pixelSize: Style.textSize
            color: Style.textColor

    As you can see above, there's something called "Style". That's our singleton. I put the singleton in a file named Style.qml. There is no need to name it "Style". You can use whatever name you want.


    pragma Singleton
    import QtQuick 2.7
    FontLoader {
        source: "qrc:/oj.ttf"
        property int textSize: 48
        property color textColor: "black"
        property color background_color: "orange"

    Note the "pragma Singleton" on top. The font file is oj.ttf and I added it to the QML resource file.

    Now comes the last piece of magic: We need a file named "qmldir". It must be deployed along with the other QML files, so I added it to the QML resource file, too. We need to add the following line to that file:

    singleton Style 1.0 Style.qml

    And that's it. Some additional stuff can be found on the wiki.
    Hope it helps! :-)

  • Qt Champions 2016

    @Wieland Thank you!

  • We plan to add support for managing fonts, colors, gradients and constants using singletons in one of the next versions of the Qt Quick Designer.

    Creating the singleton by hand is currently the best solution. In Qt Creator 4.2 we added auto completion to the binding/expression editor, so using the properties from the singleton becomes a little bit easier.

  • Qt Champions 2016

    Great. Moreover, singleton is a better approach for me. Because I could make the code as a module and share between different projects. I just make it available at github:

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.