Solved Add Font to Qt Quick Designer
-
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"
-
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! :-) -
@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.
-
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: