Skip to main content

load_font

fun load_font(_ paths: [String]) -> (FontFamilyName)

Parameters​

_ paths: [String]

A list of font file paths relative to the main file.

The font files should be of the same family.

Returns​

FontFamilyName

The loaded font family, for use as a component's font_family.

Example​

import { Text, load_font } from ui

var my_font = load_font([
    "assets/Roboto-Regular.ttf",
    "assets/Roboto-Bold.ttf",
    "assets/Roboto-Italic.ttf",
])

export var main = Text("Hello, world!", font_family: my_font)

Known Issues​

Font styles recognized as different families on Windows​

On Windows, some font files of the same family are recognized as different families, depending on their style. For example, Roboto-Regular.ttf and Roboto-Bold.ttf belong to the family Roboto, while Roboto-Medium.ttf belongs to a separate Roboto Medium family. Loading such files together in a single load_font call fails with an error, because the files must be of the same family.

To avoid the issue, load the styles in separate groups, one load_font call per weight with its bold and italic variants:

import { Text, VStack, load_font } from ui

var roboto = load_font([
    "assets/Roboto-Regular.ttf",
    "assets/Roboto-Bold.ttf",
    "assets/Roboto-Italic.ttf",
    "assets/Roboto-BoldItalic.ttf",
])

var roboto_medium = load_font([
    "assets/Roboto-Medium.ttf",
    "assets/Roboto-MediumItalic.ttf",
])

var roboto_black = load_font([
    "assets/Roboto-Black.ttf",
    "assets/Roboto-BlackItalic.ttf",
])

export var main = VStack {
    Text("Regular", font_family: roboto)
    Text("Medium", font_family: roboto_medium)
    Text("Black", font_family: roboto_black)
}

This works on all platforms, so it's best to always group font files like this.