Matching a font style exactly with QML

Question

I have a QML app that's using a font family that has 5 weights—Light/Regular/Medium/Bold/Black—and 3 styles: Normal, Italic, and Condensed.

When I load both a 'normal' and 'condensed' style of the same weight they share the same family name; whichever style was loaded first is what is used:

FontLoader { source:"qrc:/fonts/DINPro-CondRegular.otf"; id:cond }
FontLoader { source:"qrc:/fonts/DINPro-Regular.otf";     id:norm }
Timer { running:true; onTriggered:console.log(id:norm.name==cond.name) } // outputs `true`

// This ends up using the condensed flavor
Text { text:'hi mom'; font { family:'DINPro' } }

Is there some way to tell a Text object to use a specific font file or FontLoader instance? There's an italic property for italic style, but no property for the 'condensed' flavor.

How can I use both normal and condensed styles of the font in the same document, and specify which to use for different Text?

Phrogz Phrogz · Accepted Answer · 2017-07-21T17:20:59

I've found that for this particular font I can use the styleName property to control the various flavors. I just kept trying various style strings until I found ones that worked.

FontLoader { source:"qrc:/fonts/DINPro-Regular.otf"     }
FontLoader { source:"qrc:/fonts/DINPro-CondRegular.otf" }
FontLoader { source:"qrc:/fonts/DINPro-CondMedium.otf"  }

Text { text:'norm'; font { family:'DINPro';                    styleName:'Regular' } }
Text { text:'bold'; font { family:'DINPro'; weight:Font.Bold;  styleName:'Regular' } }
Text { text:'blak'; font { family:'DINPro'; weight:Font.Black; styleName:'Regular' } }
Text { text:'cond norm'; font { family:'DINPro'; styleName:'CondRegular' } }    
Text { text:'cond bold'; font { family:'DINPro'; styleName:'CondBold'    } }    
Text { text:'cond blak'; font { family:'DINPro'; styleName:'CondBlack'   } }

It feels like it's held together with tape and string, but it's working. If someone has a more robust way to handle this—especially to know exactly what strings will work for the styleName—I'll happily accept that answer instead of this one.

Matching a font style exactly with QML

1 Answers