Quick Tip: Load Fonts from a Local File with QML

If you are familiar with CSS, you have probably loaded an external font before. With an Internet application, you usually wouldn’t load it from a file, but for a desktop application that doesn’t require an Internet connection, loading from a file is a must. Luckily, this is extremely easy and the TTF file can be embedded right in the executable using the Qt resource system (QRC protocol). In QML, there is a provided FontLoader element that makes quick work of loading fonts. Here’s quick example:

FontLoader { id: myCustomFont; source: "qrc:/fonts/myCustomFont.ttf" }

Note that if you want to do so, it is possible to directly link to a URL on the Internet. However, I wouldn’t recommend this unless you can ensure that your user will have an Internet connection at run-time. Otherwise, I would recommend downloading the TTF file instead and putting it in a local resource file. Be sure to read the license before doing this though!

When you want to use the font later in a font field, for example, you can simply do:

font.family: myCustomFont.name

And that’s it! You are all set to use custom Truetype Fonts in QML! I hope this helps you out with your QML application. Happy coding!

Leave a comment