How to use Rich Text Label with variable font (Font Variation) and change any parameter (like weight) to any value in the middle of text

[hsandt]

I managed to use a variable font with a weight parameter in my Rich Text Label theme, by creating a new Font Variation and tuning the Default Font Size then and Variation > OpenType > Weight to tune the weight to any intermediate value (so more flexible than the provided set of static fonts).

I also noticed an Embolden parameter, but it's present on static fonts too, so it must be an algorithm than emboldens any font but doesn't take advantage of the weight parameter setup by the font designer (and in fact increasing it too much will make the font harder to read).

My question is now, is there a way I can take advantage of the Weight parameter inside the Rich Text Label specifically, to change it mid-text at any position to any value, using tags?

I imagined something like this:

[weight=300]That's[/weight] [weight=500]super[/weight] [weight=700]IMPORTANT![/weight]

It seems right now, I can only use tags like [b], and set the Bold font to a new Font Variation with a certain weight.

This is enough in most cases, but if I want to play with a Thin, Regular, SemiBold and Bold versions for instance, using 4 different weights (a bit like above) I cannot do this. Unless I "cheat" and reuse [i] and [b][i] and set Italics and Bold Italics to two extra fonts although its not what they are meant for.

Same thing for any other parameter a font designer would add like a progressive italics angle. I've never seen this so that's hypothetical, but in this case to avoid having too many tags we could pass the parameter as attribute in something like:

[param("weight")=700]Heavy [param("angle")=20]tilted[/param][/param] text!

The fact that Rich Text doesn't support entangled BBCode tags means there is no ambiguity in the param being closed.

Alternatively, we could support an arbitrary number of fonts (or themes) with:

[font(1)]font 1[/font] [font(2)]font 2[/font] etc.

I don't have a strong need for this right now because I only need two different weights, but I figured rich text could exploit variable font parameters more.

I prefer staying pragmatic and think about real-world use cases though, so do you have examples of situations when you really wanted more flexibility in using rich text with variable font but was limited by the engine?

[Calinou]

This is already possible using [font] tags that point to FontVariation resources saved as .tres.

[hsandt]

Ah, I see! I was using the font tag to target raw font files directly so I thought it was only for static fonts generated on the fly from font files. Then that offers many possibilities!

I'm writing a full path with res://... each time though, so was wondering if there was any way to write something shorter (like alias or just the font name) or if my best bet is to keep the fonts just under res://fonts to get the smallest paths possible.

Ah, I'm thinking about another trick: I could process the text however I want before setting it on the RichTextLabel. So I could design my own short alias tags!

[Calinou]

Ah, I'm thinking about another trick: I could process the text however I want before setting it on the RichTextLabel. So I could design my own short alias tags!

RichTextEffect also allows you to create your own tags 🙂