Older versions (leaves this page)
React Native RN C++ C++

Changing Fonts

Fonts are stored in the Roku client; for example, <app>/client/components/yi_Gotham-Bold.ttf. Ensure that you copy the fonts used by the Roku client from <app>/youi/AE/assets to <app>/client/components.

The following limitations and restrictions apply because of limitations with the Roku BrightScript language and the limited resources provided by some Roku devices. Keep them in mind if you are designing an app to run on Roku devices:

General Considerations

  • All fonts used by the Cloud Solution server must be in the components directory of the Roku client in order to be used. If a font loaded on the server isn’t present on the client, the text won’t render, and there’s no fallback.
  • Animations that scale a font may be visually unappealing.

Supported Fonts

The Roku client supports TrueType (.ttf) and OpenType (.otf) fonts only.

Memory Considerations

  • Loading a single font with many sizes may not save memory when substituting some of these fonts with different ones, because each member and size of a font family allocates its own block of texture memory when loaded.
  • Observed texture memory allocated per font family and per size ranges from ~32KB to ~88KB, which is minimal when compared to the texture memory available on the low-end Roku devices. To observe the texture memory allocated by fonts and images at a given moment, connect your device via telnet on port 8080 and run the r2d2_bitmaps command.
  • The Roku client supports loading and rendering of any number of fonts. Using many fonts seems to have minimal impact on texture memory usage.
  • Fonts are loaded into texture memory on the Roku client whenever they’re set to render. Therefore, only the fonts currently used in your scene should be loaded.
    • Each style and size of font loaded allocates texture memory.
    • Loading Arial-Regular with a font size of 32 and Arial-Regular with a font size of 30 loads the font twice into texture memory. The amount of memory allocated depends on the size of the font (20pt might allocate 32kb, where 40pt might allocate 64kb).

Cloud Solution Server and Roku Client Differences

  • Roku doesn’t support True Type Collection (.ttc) font files.

    • If the Cloud Solution server references a .ttc font file, the Roku client searches for a .ttf equivalent based on the style used. For example, yi_Arial.ttc loaded with the regular style results in a search for yi_Arial-Regular.ttf on the Roku client.

    • If your project uses any .ttc font files, unpack them into .ttf files and place them into the Roku client’s components directory instead of the .ttc files. Ensure that the unpacked .ttf files match the naming convention used for the .ttc file. For example, yi_Helvetica-Regular.ttc loaded with the bold oblique style will be referenced by yi_Helvetica-Regular-Bold Oblique.ttf on the Roku client.

  • Fonts may render differently on the server and the client. Some sizes may differ enough that the text height needs some padding to accommodate how it renders on the Roku client. Text rendering also seems to differ among devices.
    • An example of a font which has been observed to render differently is yi_Zapfino-Regular.ttf. This font only renders one or two lines of text on the Roku client, while three lines are rendered on the Cloud Solution server and don’t render at all when the Cloud Solution server is set to render two lines. In such cases, it’s best to experiment with different heights for your text node to find one which looks correct on all Roku clients.
  • Some fonts styles may not appear the same on the Roku client as they appear on the Cloud Solution server. Bold fonts have been observed to appear very similar to their regular counterpart when set to smaller font sizes.

For details, see CYICloudInterface Class Reference.