How to have multiple FontLoader objects in one class?

Question

I am writing an application for which a client has provided its own font. The font comes in four separate otf files, one for regular, bold, italics, and bold. If I want to use only one of these four fonts in my class, I create a FontLoader as follows:

 FontLoader { id: clientFontRegular; source: "qrc:/client/fonts/Font-Regular.otf" } 

and then I can use it for any control on my page, for example:

 font.family: clientFontRegular.name 

My problem is that I have several controls on my page and I want to use regular expressions for some, bold for some, italics for some others, etc. For this, I added FontLoader objects for other fonts as well, like this:

 FontLoader { id: clientFontBold; source: "qrc:/client/fonts/Font-Bold.otf" } FontLoader { id: clientFontItalic; source: "qrc:/client/fonts/Font-Italic.otf" } FontLoader { id: clientFontBoldItalic; source: "qrc:/client/fonts/Font-BoldItalic.otf" } 

But this does not work correctly. All four identifiers (clientFontRegular, clientFontBold, clientFontItalic and clientFontBoldItalic) can be used anywhere on the page (i.e., without crashes or ending with the use of the system font), but the font used regardless of what is in bold.

I know that all four of my otf files otf valid, because if I comment on everything except FontLoader for one file and use only one, the custom font is displayed correctly. There seems to be a problem with trying to define multiple FontLoaders in the same class (none of the FontLoader samples I've seen on the Internet use one special font).

Does anyone know how to do this?

Answer 1

I also struggled with the same problem and wondered why there is nothing about this in the docs. This is how I worked:

First, I defined a custom Text (e.g. Label.qml) where FontLoader used for each font style, for example:

 import QtQuick 2.5 Text { FontLoader { id: loader; source: "fonts/Blogger_Sans.otf"; } FontLoader { source: "fonts/Blogger_Sans-Italic.otf"; } FontLoader { source: "fonts/Blogger_Sans-Light.otf"; } FontLoader { source: "fonts/Blogger_Sans-Medium.otf"; } FontLoader { source: "fonts/Blogger_Sans-Bold.otf"; } FontLoader { source: "fonts/Blogger_Sans-Light_Italic.otf"; } FontLoader { source: "fonts/Blogger_Sans-Medium_Italic.otf"; } FontLoader { source: "fonts/Blogger_Sans-Bold_Italic.otf"; } font.family: loader.name; } 

The “trick” is not to dynamically reassign the Text font.family property. And this is enough to control the font style:

 Column { anchors.centerIn: parent; MyLib.Label { text: "Blogger_Sans" } MyLib.Label { text: "Blogger_Sans-Italic" font.italic: true; } MyLib.Label { text: "Blogger_Sans-Light" font.weight: Font.Light; } MyLib.Label { text: "Blogger_Sans-Medium" font.weight: Font.Medium; } MyLib.Label { text: "Blogger_Sans-Bold" font.weight: Font.Bold; } MyLib.Label { text: "Blogger_Sans-Light_Italic" font.weight: Font.Light; font.italic: true; } MyLib.Label { text: "Blogger_Sans-Medium_Italic" font.weight: Font.Medium; font.italic: true; } MyLib.Label { text: "Blogger_Sans-Bold_Italic" font.weight: Font.Bold; font.italic: true; } } 

I just assume, but it seems that once fonts are loaded (as in this case by anonymous FontLoader s), they are remembered and become available automatically when you specify them using the available font properties. But this is just a guess.

Edit

As pointed out by peppe comments, you can also load custom fonts directly into C ++ using QFontDatabase :: addApplicationFont :

 QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans.otf"); QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans-Bold_Italic.otf"); QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans-Medium_Italic.otf"); QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans-Light_Italic.otf"); QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans-Italic.otf"); QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans-Bold.otf"); QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans-Medium.otf"); QFontDatabase::addApplicationFont(resDir + "fonts/Blogger_Sans-Light.otf"); 

Font and related styles are now available in QML:

 Text { font.family: "Blogger Sans" // note the use of the font family name text: "MyText" font.bold: true font.italic: true } 

C ++ - the approach just seems cleaner, and also allows you to specify fonts without using file paths, which is another big advantage.