6.3. Loading a Custom Font

It is a very common approach in modern applications to use and deploy custom fonts and not depend on the system fonts. For NoteApp, we would like to do the same and we will use what QML offers for this.

The FontLoader [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-fontloader.html] QML type enables you to load fonts by name or URL path. As the loaded font could be widely used in the entire application, we recommend loading the font in the main.qml file and use it in the rest of the components.

// main.qml

Rectangle {
    // using window as the identifier for this item as
    // it will the only window of the NoteApp
    id: window
    ...
    // creating a webfont property that holds the font
    // loading using FontLoader
    property variant webfont: FontLoader {
        source: "fonts/juleeregular.ttf"
        onStatusChanged: {
            if (webfontloader.status == FontLoader.Ready)
                console.log('Loaded')
        }
    }
    ...
}

So we have created a webfont property for the window item. This property can be safely used in the rest of the components, so let us use it for the editArea in the Note component.

// Note.qml

...
// creating a TextEdit item
TextEdit {
    id: editArea
    font.family: window.webfont.name; font.pointSize: 13
    ...
}

To set the font for editArea, we use the font.family [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-text.html#font.family-prop] property. From the window, we use its webfont property to get the font name to be set.

What’s Next?

The next step will take you through the details of making NoteApp* ready for deployment.