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.