QML Preload Font

Question

I have a font with glyphicons that I want to use in my QML source. I load the font with:

FontLoader {
    id: glyphs
    source: "fonts/glyphicons.ttf"
}

Then show a glyphicon with:

Text {
    font.family: glyphs.name
    text: "\ue80a"
}

The problem is that sometimes the Text elements will load before the FontLoader finishes to load the font file and I just see the blank squares instead of the icons.

I also tried:

Text {
    visible: glyphs.status == FontLoader.Ready ? true : false
    font.family: glyphs.name
    text: "\ue80a"
}

But that doesn't seem to help.

Answer 1

I found an easy fix for this.

FontLoader {
    id: glyphs
    source: "fonts/glyphicons.ttf"
}
Text {
    font.family: glyphs.name
    text: glyphs.status == FontLoader.Ready ? "\ue80a" : ""
}

The problem was that the character was rendered before the font was loaded. If we just refresh the text after FontLoader.Ready is triggered, it will show correctly.

In the example above, the glyphicon will only show after the font was loaded.