FontLoader QML Type | Qt Quick (original) (raw)

Allows fonts to be loaded by URL. More...

• List of all members, including inherited members

Properties

• font : font (since 6.0)
• name : string
• source : url
• status : enumeration

Detailed Description

The FontLoader type is used to load fonts by URL.

The status indicates when the font has been loaded, which is useful for fonts loaded from remote sources.

For example:

import QtQuick 2.0

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

[Text](qml-qtquick-text.html) { text: "Fancy font"; font: webFont.font }

}

See also Qt Quick Examples - Text Fonts.

Property Documentation

font : font [read-only, since 6.0]

This property holds a default query for the loaded font.

You can use this to select the font if other properties than just the family name are needed to disambiguate. You can either specify the font using individual properties:

Item { width: 200; height: 50

[FontLoader](qml-qtquick-fontloader.html) {
    id: webFont
    source: "http://www.mysite.com/myfont.ttf"
}
[Text](qml-qtquick-text.html) {
    text: "Fancy font"
    font.family: webFont.font.family
    font.weight: webFont.font.weight
    font.styleName: webFont.font.styleName
    font.pixelSize: 24
}

}

Or you can set the full font query directly:

Item { width: 200; height: 50

[FontLoader](qml-qtquick-fontloader.html) {
    id: webFont
    source: "http://www.mysite.com/myfont.ttf"
}
[Text](qml-qtquick-text.html) {
    text: "Fancy font"
    font: webFont.font
}

}

In this case, the default font query will be used with no modifications (so font size, for instance, will be the system default).

This property was introduced in Qt 6.0.

This property holds the name of the font family. It is set automatically when a font is loaded using the source property.

This is equivalent to the family property of the FontLoader's font property.

Use this to set the font.family property of a Text item.

Example:

Item { width: 200; height: 50

[FontLoader](qml-qtquick-fontloader.html) {
    id: webFont
    source: "http://www.mysite.com/myfont.ttf"
}
[Text](qml-qtquick-text.html) {
    text: "Fancy font"
    font.family: webFont.name
}

}

The URL of the font to load.

status : enumeration [read-only]

This property holds the status of font loading. It can be one of:

Use this status to provide an update or respond to the status change in some way. For example, you could:

• Trigger a state change:
  State { name: 'loaded'; when: loader.status == FontLoader.Ready }
• Implement an onStatusChanged signal handler:
  FontLoader {
  id: loader
  onStatusChanged: if (loader.status == FontLoader.Ready) console.log('Loaded')
  }
• Bind to the status value:
  Text { text: loader.status == FontLoader.Ready ? 'Loaded' : 'Not loaded' }

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.