How to use multiple fonts in one string

Using multiple fonts in a single string is only possible with the use of rich text.

The RichText sample project that ships with Storyboard actually does have an example of this. If you have never imported a sample this can be found in Storyboard Designer via:

File > Import > Storyboard Sample > RichText

The main feature that enables you to do this is by utilizing the font-face parameter in the rich text suite.

From our docs:

In short, you will need to first define the font files you will be using for the string. Using the RichText demo as an example, it uses the fonts “Roboto-Bold” and “Roboto-Light”.

<style>
  @font-face {
    font-family: roboto-bold;
    src: url('file:fonts/Roboto-Bold.ttf')
  }
  @font-face {
    font-family: light;
    src: url('file:fonts/Roboto-Light.ttf')
  }
</style>

Now when constructing your rich text string you simply need to surround the text with the style tag like as described in the documentation. For example:

<span style="font-family:roboto-bold"> Roboto Bold </span>
<span style="font-family:light"> Roboto Light </span>

Of course don’t forget to combine both of these as part of a single string that is assigned to the text field. You can do this by surrounding them in double square brackets “[[]]” like so:

[[
<style>
  @font-face {
    font-family: roboto-bold;
    src: url('file:fonts/Roboto-Bold.ttf')
  }
  @font-face {
    font-family: light;
    src: url('file:fonts/Roboto-Light.ttf')
  }
</style>
<span style="font-family:roboto-bold"> Roboto Bold </span>
<span style="font-family:light"> Roboto Light </span>]]

All together this creates the string "Roboto Bold Roboto Light", but each font name will be using the respective font.

Considerations for localization

Using rich text in this way actually allows for writing multiple languages that use different fonts in a single string as well. This can be useful when the multiple languages don’t share the same character set in a given font file. A caveat to this of course is that if the languages require the text shaping feature provided by harfbuzz, then it is unlikely to work. This is because the text shaping can only be globally set to one localization at a time. This means that if the languages only differ in their font's glyph set then this approach will work, but if they also need text shaping then you will have to use multiple text render extensions/controls.