Loading different fonts in QML

Keywords: network Qt

Note by FontLoader

FontLoader can load fonts by name, local path, and network url path.

//Load fonts installed by the system by name
 FontLoader { id: fixedFont; name: "Courier" }

//Load a local font file
FontLoader { id: localFont; source: "content/fonts/tarzeau_ocr_a.ttf" }

//Loading fonts on network url paths
FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }

Give an example:

import QtQuick 2.0

Column {
    FontLoader { id: fixedFont; name: "Courier" }
    FontLoader { id: webFont; source: "http://www.mysite.com/myfont.ttf" }

    Text { text: "Fixed-size font"; font.family: fixedFont.name }
    Text { text: "Fancy font"; font.family: webFont.name }
}

When you use it, you only need it

font.family: webFont.name

It can be specified by font.family.

Several states of FontLoader

FontLoader.Null - No font specified
 FontLoader.Ready - Font has been loaded
 FontLoader.Loading - Font is being loaded
 FontLoader.Error - Error loading font

Give an example:

FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }

Text {
	text: {
	if (webFont.status == FontLoader.Ready) myText
		else if (webFont.status == FontLoader.Loading) "Loading..."
		else if (webFont.status == FontLoader.Error) "Error loading font"
	}
	color: "lightsteelblue"
	width: parent.width
	wrapMode: Text.WordWrap
	font.family: webFont.name; font.pixelSize: 20
}

This allows you to determine the status of font resources on the loading network path, whether they succeed or fail.
This example was found in the Qt Help Document - "Qt Quick Examples - Text"

Operation effect:

Code:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 320; height: 480
    color: "steelblue"
    title: qsTr("text")
    property string myText: "The quick brown fox jumps over the lazy dog."

    FontLoader { id: fixedFont; name: "Courier" }
    FontLoader { id: localFont; source: "content/fonts/tarzeau_ocr_a.ttf" }
    FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }

    Column {
        anchors { fill: parent; leftMargin: 10; rightMargin: 10; topMargin: 10 }
        spacing: 15

        Text {
            text: myText
            color: "lightsteelblue"
            width: parent.width
            wrapMode: Text.WordWrap
            font.family: "Times"
            font.pixelSize: 20
        }
        Text {
            text: myText
            color: "lightsteelblue"
            width: parent.width
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
            font { family: "Times"; pixelSize: 20; capitalization: Font.AllUppercase }
        }
        Text {
            text: myText
            color: "lightsteelblue"
            width: parent.width
            horizontalAlignment: Text.AlignRight
            wrapMode: Text.WordWrap
            font { family: fixedFont.name; pixelSize: 20; weight: Font.Bold; capitalization: Font.AllLowercase }
        }
        Text {
            text: myText
            color: "lightsteelblue"
            width: parent.width
            wrapMode: Text.WordWrap
            font { family: fixedFont.name; pixelSize: 20; italic: true; capitalization: Font.SmallCaps }
        }
        Text {
            text: myText
            color: "lightsteelblue"
            width: parent.width
            wrapMode: Text.WordWrap
            font { family: localFont.name; pixelSize: 20; capitalization: Font.Capitalize }
        }
        Text {
            text: {
                if (webFont.status == FontLoader.Ready) myText
                else if (webFont.status == FontLoader.Loading) "Loading..."
                else if (webFont.status == FontLoader.Error) "Error loading font"
            }
            color: "lightsteelblue"
            width: parent.width
            wrapMode: Text.WordWrap
            font.family: webFont.name; font.pixelSize: 20
        }
    }
}

Posted by leocon on Sat, 05 Oct 2019 00:29:36 -0700