Importing a Semibold font to QML - qt

I am trying to import a Semibold font, in particular, the Montserrat Semibold variant to QML. In order to do so, I'm using the following code:
FontLoader{
id: semi
source: "Montserrat-SemiBold.ttf"
}
Where Montserrat-SemiBold.ttf is the following file:
And then I try to visualize it on screen with the Text type:
Text{
text: Math.round(100*progress.value) + "%"
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: qmlCfg.fontSize
color: "black"
font.family: semi.name
font.bold: true
}
The problem is that the text appears to be bold, and not semibold, as I was expecting:
As you can see, this 35% looks more bold than semibold to me:
Do you know how to fix this? If I set font.bold: false, the text changes to the regular variant, which is not what I want either.

Are you sure that your font is properly loaded? For me this example gives the correct output as shown in the screenshot.
Besides the font.bold property there is also font.weight on which you can set the weight of semi bold (600), but as you can see in my example it doesn't have an impact on the text as the font only includes one font weight which is semi bold (600). This you can also see in the console output added to the FontLoader.
Output
qml: Font weight 600
Example
import QtQuick
Window {
title: "Font"
width: 1000
height: 240
visible: true
FontLoader {
id: webFont
source: "qrc:/Montserrat-SemiBold.ttf"
Component.onCompleted: console.log("Font weight", webFont.font.weight)
}
component TestText: Text {
text: "Whereas recognition of the inherent dignity"
font.family: webFont.font.family
font.pixelSize: 48
}
Column {
TestText {}
TestText { font.weight: 600 }
TestText { font.bold: true }
}
}
.
├── assets.qrc
├── CMakeLists.txt
├── main.cpp
├── main.qml
└── Montserrat-SemiBold.ttf
assets.qrc
<RCC>
<qresource prefix="/">
<file>Montserrat-SemiBold.ttf</file>
</qresource>
</RCC>
CMakeLists.txt
...
set(CMAKE_AUTORCC ON)
qt_add_executable(appuntitledStackoverflow
assets.qrc
main.cpp
)
...

Related

Unable to use ttf icon font in QML

I would like to use an icon font with QML and so I downloaded the great Line Awesome, but when I try to load the file and use it in QML it doesn't work. I am using FontLoader and then set the unicode string of the icon I want to the the text property of a Text element. In the code below when the text cannot interpret the unicode string (copied from the Line Awesome website) correctly.
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
Window {
id: window
visible: true
width: 1000
height: 700
title: qsTr("Hello World")
FontLoader{
id: f
source: "file:///home/user/Downloads/1.3.0/fonts/la-regular-400.ttf"
}
Text {
id: name
font.family: f.name
text: ""
}
Button{
anchors.right: parent.right
onClicked: console.debug(f.status == FontLoader.Ready, f.name) // returns true and "la-regular-400"
}
}
The only way I know of that makes it work reliably is:
Load the font using QFontDatabase, during application startup or at some other convenient time.
Use the QFontInfo to get the actual family name of that font as seen by Qt. What confuses most people is that QFont is a bit of a misnomer. It's not a font at all, it's just a request for a font. The actual font's information is provided by QFontInfo.
Use that family name in Qt Quick and elsewhere.

Qt QML fails to render text correctly on some systems

I have so far seen this issue on a Win 7 PC, not sure if it will happen on all Win 7 PCs?
As you can see, the text 'Personal Info' defined at the top inside a QML Text{..} box is incorrectly rendered:
I realized that the text below the header was working fine, this is defined as a Label{...}, so I replaced the Text object with a Label object recompiled and ran on the target machine and it now works -
The code is compiled with Qt 5.10.1 minGW 32bit.
The qml file is fairly long, the area in question is as follows:
Rectangle{
id:titleNameContainer
color: "transparent"
anchors.top: parent.top
width: parent.width
height: 40
anchors.horizontalCenter: parent.horizontalCenter
CenturyGothicFont{id: nameStrFont}
Label{
id: nameStr
text: "Personal Info"
width:parent.width
//color: "black"
horizontalAlignment: Text.AlignHCenter
font{
family: nameStrFont.name
pixelSize: 30
}
}
}
The 'label' was a 'text' object.
The text itself is an imported font of type .ttf, this font clearly works when used as a label. I have not made any changes to the anti aliasing settings as asked in the comments (I would have to look this up if I wanted to / need to).
Can anyone explain what is going on here?

Using font awesome in QML: wrong characters

I would like to use font awesome font in my QML app. But it doesn't work very well.
First I use this method : https://github.com/QMLCommunity/font-awesome-qml
But I got only two icons working, see the capture of my app.
Only the laptop and battery icons are displayed. The others (one top left, and others on each tab) got kanjis or other symbols.
After I also tried that solution : How to use Font Awesome in QML
on the top left icon, whithout success.
Here the code of the notification bar :
RowLayout {
anchors.fill: parent
Label {
font.pointSize: 10
font.family: "fa-solid-900"
text: "\uf071" + " Message"
}
Item {
Layout.fillWidth: true
}
Label {
font.pointSize: 10
font.family: awesome.family
text: awesome.loaded ? awesome.icons.fa_laptop : "x"
Layout.alignment: Qt.AlignRight
}
Label {
font.pointSize: 10
font.family: awesome.family
text: awesome.loaded ? awesome.icons.fa_battery_full + " 100 %" : "x"
Layout.alignment: Qt.AlignRight
}
}
PS: I used the 2nd link solution for the first icon, but the result is exactly the same with the first solution.
And the tab bar:
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
Material.theme: Material.Dark
FontAwesome {
id: awesome
resource: "qrc:///controls/fa-solid-900.ttf"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_star : "x") + " " + "Général"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_cogs : "x") + " " + "Test"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_trophy : "x") + " " + "Match"
}
}
How can I display the right icons each time?
Thanks in advance!
I recently ran into the same issues and documented my approach in a blog post.
Basically, my issue was that starting with version 5, Font Awesome provides some of the icons in one font file with "regular" weight and one in a file with "solid" weight classes. However, when loading, both will register with a font name of "Font Awesome 5 Free" (assuming the free version is used).
I would have expected that it is possible to switch between the regular and solid icon sets by setting e.g. the bold property of a font in QML:
import QtQuick 2.0
Item {
width: 100
height: 100
FontLoader {
id: faRegular
source: "./fa-regular-400.ttf"
}
FontLoader {
id: faSolid
source: "./fa-solid-900.ttf"
}
Column {
width: parent.width
Text {
font.family: "Font Awesome 5 Free"
font.bold: true // use "solid" variant
text: "\uf073" // fa-calendar-alt
}
Text {
font.family: "Font Awesome 5 Free"
font.bold: false // use "regular" variant
text: "\uf073" // fa-calendar-alt
}
}
}
Unfortunately, this did not work for me, as Qt merges both fonts and only either the regular or the solid variant was used (which causes some icons from not being rendered at all, especially if you use the regular variant which contains much less icons at least in the free version of the font).
My "solution" was to edit the solid font file (e.g. using FontForge) and change the font name to e.g. "Font Awesome 5 Free Solid". With this, I was able to load both variants of the font at the same time and switch between the two by using their font name like this:
import QtQuick 2.0
Item {
width: 100
height: 100
FontLoader {
id: faRegular
source: "./fa-regular-400.ttf"
}
FontLoader {
id: faSolid
source: "./fa-solid-900.ttf"
}
Column {
width: parent.width
Text {
font.family: faSolid.name // use solid variant
text: "\uf073" // fa-calendar-alt
}
Text {
font.family: faRegular.name // use regular variant
text: "\uf073" // fa-calendar-alt
}
}
}
This is probably due to font merging when some characters cannot be resolved. You can try to load FontAwesome from C++ side
Loading the font with a QFontDatabase
int fontId = QFontDatabase::addApplicationFont(QStringLiteral("/path/to/font-awesome.ttf");
Disabling merging on a new font
QFont font("fa-solid-900"); // You can also use the fontId to get family name here
font.setStyleStrategy(QFont::NoFontMerging);
Exposing the font to QML with a QFont Q_PROPERTY or directly in the context
Q_PROPERTY(QFont fontAwesome READ fontAwesome CONSTANT)
This is discussed in the Qt mailing list here

Qt QML font awesome not working on MAC and IOS

I am working on QML and loading the font awesome using FontLoader
FontLoader {
id: awesomeLoader
name: "awesome"
source: "qrc:/images/fontawesome-webfont.ttf"
}
Everything just find on Linux and Android, but it is not working on IOS and MAC, the font icon become empty rectangle.
This is how I use it :
Text {
font.pointSize: 20
font.family: "awesome"
anchors.fill: parent
text: isBackButton ? "\uf053" : "\uf0c9"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
Is there anything special on MAC / IOS?
Make sure you're setting font.family:
font.family: awesomeLoader.name
One thing I noticed on Windows was that I could get icons to show up without setting font.family: "FontAwesome" (I forgot to do it), but when switching to macOS they would be broken.
It works in this way:
FontLoader {
id: awesomeLoader
//name: "awesome" (Comment or delete)
source: "qrc:/images/fontawesome-webfont.ttf"
}
In Text Item change font.family value to awesomeLoader.name (FontLoader id name)
Text {
font.pointSize: 20
font.family: awesomeLoader.name
anchors.fill: parent
text: isBackButton ? "\uf053" : "\uf0c9"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}

Default margin when using Text QML type

Consider this simple code sample:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
color: "black"
Text {
text: "Hello World!"
font.family: "Helvetica"
font.pointSize: 24
color: "red"
}
}
Why is there a margin at the top? It seems that giving a custom font with a specific pixelSize gives a new size to the Text and breaks the alignement.
EDIT: well it seems that even without font there still is a margin.
A simpler solution would be to set the attribute y of the Text like this:
Text {
text: "Hello World!"
font.family: "Helvetica"
font.pixelSize: 42
color: "red"
y: -contentHeight + font.pixelSize
}
Bear in mind that if you set the property font.overline: true then it will be out of the Rectangle
I managed to remove this extra space with the use of FontMetrics but this solution seems way too complicated for this simple problem. Waiting for a better fix.
Window {
visible: true
color: "black"
FontMetrics {
id: fontmetrics24
font.pixelSize: 24
font.family: "Helvetica"
}
Text {
text: "Hello World!"
font.family: fontmetrics24.font.family
font.pointSize: fontmetrics24.font.pixelSize
color: "red"
y: - fontmetrics24.height * 0.21
}
}
I think this issue is related to this question. On macOS (Sierra), the window looks like this:
As ddriver pointed out, this is probably a bug and is already reported here.

Resources