Skip to main content
N
1mo ago

How to Change the Font of Text Run? Best Practices?

Hi everyone,

I’d like to know the best way to change the font of a text run or all text elements in a Rive file. What are the best practices for doing this?

Some specific questions I have:

  1. How can I modify the font for a specific text run or globally for all text in the file?

  2. Are there any limitations or recommendations when working with fonts in Rive?

  3. Is there anything I should configure in the Rive file to make it easier to update text styles programmatically?

Thanks in advance for your help! Any tips or examples would be greatly appreciated.

3 replies
N
1mo ago

I think I answer everything in this video, but let me know if you have more font-related questions. :)

N
1mo ago

Hi Lance,

First of all, many thanks! The video and all the explanations were very clear, and I was able to get it working in Flutter.

As a follow-up, I have some additional questions regarding changing fonts dynamically in Rive:

  1. Is it possible to modify the font at runtime? For example, if the text run is already visible and the user changes a configuration to select a different font, can this be applied dynamically? Or should I re-load all the Rive File?

  2. If I want to map a unique font name (e.g., "customFont") to a specific file name dynamically, is this possible? For example, if a font's unique name in the Rive file is something like "artboard1-font-2888", can I pass it through a mapping function in the code to determine which file to load (e.g., "font1.ttf", "font2.ttf") based on the user’s selection?

  3. Does Rive only support TTF fonts, or are there other supported formats?

Thanks in advance for your help! Any insights or examples would be greatly appreciated.

1mo ago

  1. Yep, you can change them after the Rive file has loaded. Just keep a reference to the asset so you can change it at any point. I know this isn't the right runtime, but here's a JS example that swaps the images as you scale the window:

  2. Yes, that will work just fine.

  3. We don’t support importing WOFF/WOFF2 directly into the editor, but there is a way to use a font that has been compressed with Brotli, which is the same compression that WOFF2 uses. I have an example that compresses a 211kb OTF down to 42kb.

    1. Compress the TTF or OTF font using Brotli.
    2. Upload the compressed font to S3 and add a “content-encoding” header with a value of “br”. Your users will download the compressed version, then the browser takes care of decompressing it before passing it to the Rive.
    3. Use assetLoader to tell Rive to use the downloaded font.

    Here’s an example using React: https://codesandbox.io/p/sandbox/rive-quick-start-react-forked-ppfcm4?file=%2Fsrc%2FApp.js%3A16%2C64&workspaceId=954b2225-8bc6-4729-a1da-0025c0b3f1f4