Add Font to Qt Quick Designer


  • Qt Champions 2016

    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"


  • Moderators

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


  • 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:

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


Log in to reply
 

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