Referenced Fonts: Advice much appreciated!
Hi.
If I have 10 fonts that I would like to be able to choose from at runtime. Wondering, do all of these 10 fonts need to be added in to the rive project and set to referenced? Or can I just use 1 font in the rive project, set that to referenced, and use code to create more font choice? I couldn't quite see in the documentation about whether referenced fonts must be added to the rive project to be able to be referenced.
Our website also uses google translate support up to 30 languages. Our Rive files (using Inter) work for several of these languages (French, Spanish etc) but wondering what is the best workflow for 'fall back / system fonts' for when glyphs aren't supported. (e.g. Chinese) Hoping there is a way to not have to import all fonts in to rive. (Noto Sans SC is extensive but still doesn't cover all 30 fonts).
If there are any recommendations of best practise or direct examples you could share of the code setup for the above, that would be great. simple JS or React. I did see this example from Gordon Hayes on Code Sandbox with the out of band fonts swapping out but assuming these fonts need to be added to the rive proj?
Thank you.
Craig
Yes, you can do this with referenced assets, which is good because the Chinese font set is HUGE! :)
The code is a little different depending on whether you're using the JS, React, or Flutter web runtimes, but here's an example using React:
With how big fonts can be, I'd also recommend using a compressed version of the TTF:
If possible, I'd also recommend limiting the characters used. You can do this in the Rive assets panel.
Thank you so much Lance. This is really helpful information and I appreciate the codeSandbox links.
Would you happen to have a straight js/html example avail on code sandbox of this font swap code?
Much appreciated. Thanks. Craig.
This one doesn't handle the the localization, but it does show how to swap fonts using JS:
This is great. Thank you v much Lance
Hi again Lance. Just seeking a little more confirmation please with this part of the question so I can pass on to my dev.
"Wondering, do all of these 10 fonts need to be added in to the rive project and set to referenced? Or can I just use 1 font in the rive project, set that to referenced, and use code to create more font choice? "
Ideally i want to avoid adding more than one font to our projects as data size starts to stack up way too much.
Thank you
If you change a referenced font, it will change all of the text runs where that font is being used. If you want to have 3 possible font options for 3 different fields, in Rive you'll need to add 3 different fonts. If you want all 3 to be Inter, you only have to load Inter once, not 3 times. Does that make sense.
The most important part to remember is that adding new referenced fonts doesn't add file size to your .riv. Your users only need to download the fonts that they're going to use.
Thanks Lance.
and just confirming, there is definitely no way to be able to add fonts at runtime only? Every font that is required, MUST be added in to the rive project to be able to be referenced?
E.g. with this scenario: I have 200 .riv files live on our site all just using text with the 1 font inter. But we release more google translate languages on our site allowing for Chinese. Inter doesn't support Chinese glyphs, so I need to use Noto Sans SC. Is there any possible way of this Noto Sans SC being picked up at runtime as a fallback font so i don't have to manually go through every .rev project and add it as a referenced font to all 200 projects?
Trying to keep our .rev files small too without the need to load in Noto Sans SC (18mb). And, what if we need language support in 6months to more obscure glyphs that aren't avail in Inter or Noto. Just trying to avoid this manual updating in each project and handling all of this font fallback to work outside of the rive files - and owned by our dev team.
Thanks again Lance. I really appreciate your responses and support on this one.