How do I get two FontLoaders in QML to work?

Question

Using QML, I have defined two FontLoaders in a pragma Singleton file. I can only get one of these fonts to display when I run my program inside QML scene. How can I get both of the fonts I've defined to render? Thank you!

// Defining two fonts inside Fonts.qml:

pragma Singleton
import QtQuick 2.4

QtObject {

    readonly property var primaryFont: FontLoader {
        source: "../assets/fonts/CircularStd-Book.ttf"
    }

    readonly property var boldFont: FontLoader {
        source: "../assets/fonts/CircularStd-Bold.otf"
    }

}

// Calling both fonts in separate QML file:

import QtQuick 2.4
import "../../../imports/Fonts.qml"

Text {
    id: welcomeMessage
    text: "Good Morning"
    font.family: Fonts.primaryFont.name
}

Text {
    id: driverName
    text: "Joe"
    font.family: Fonts.boldFont.name
}

I'm expecting the welcomeMessage text to display with a normal font weight and the driverName text to display with a bold font weight. However, both fonts display with a normal font weight.

If I comment out primaryFont in my pragma Singleton, then driverName displays in bold. Why can I not get both of these fonts to load?

What are the two values of"name"? As both seem to be from the same base font, they might have the same name and get merged, then you would to have to use bold: true or the weight property, I think. — Frank Osterfeld
@FrankOsterfeld you are right! I ran a console.log on the font.family name and both the bold and primary font are receiving a value of "Circular Std." I tried to manually override this with a custom name in my FontLoader, but then the font did not load at all. I assume the font name is coming from its metadata or something? — JoelMertz

Luka Luka · Accepted Answer · 2019-04-08T11:04:53

Text {
    id: driverName
    text: "Joe"
    font.family: Fonts.boldFont.name
    font.bold: true
}

Add this to make it work: font.bold: true

How do I get two FontLoaders in QML to work?

1 Answers