Add Font to Qt Quick Designer

benlau

Hello,

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
        font.family: "FontAwesome"
    }
}

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"

? Offline

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:

main.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
    }
}

SomeComponent.qml

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.family: Style.name
        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.

Style.qml

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! :-)

benlau

@Wieland Thank you!

Thomas Hartmann

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.

benlau

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:

https://github.com/benlau/fontawesome.pri