How to dynamically scale font size in Godot

In the difficult quest of making games compatible with (almost) all the existing screen resolutions, one of the main problem we've encountered is how to scale texts properly when resizing the UI.

In Godot (at least up to version 4.4) text size is not automatically scaled if its control scale changes (e.g. Label, RichTextLabel, etc...), so we need some tricks to get around this problem.

"Font Scaler" Script

We need to create a script that automatically scales the font of a target text node (e.g. Label, RichTextLabel, etc...).

Initial State

We are scaling the font/text based on the initial state of our label, which means that we need to cache everything from our target text first. This includes the initial font size and the control size itself (so that we can make a linear proportion).

var base_font_size : int
var base_size : Vector2
var label : Label

func _enter_tree():
  # caches initial sizes
  label = get_parent() as Label
  base_size = label.size
  base_font_size = label.get_theme_font_size("font_size", label.get_class())

Updating the Font when the Control changes

Every time the control is scaled we need to compare the new size with the base one, and then calculate the scaling ratio and update the font size.

First we need to listen to whenever the control is resized:

func _enter_tree():
  # ...

  label.resized.connect(set_text_size)
  
  # ...


func _exit_tree():
  # remember to disconnect when exiting!
  label.resized.disconnect(set_text_size)

Then, the actual method that applies the scale:

# ...

func set_text_size():
  var new_size = label.size;
  
  # scale base on control width
  var scale = new_size.x / base_size.x;
  var scaled_size :int= floor(base_font_size * scale);

  # bitmap cannot be greater than 4096
  if scaled_size>4096:
    continue;
  
  # apply scale
  label.add_theme_font_size_override("font_scale", scaled_size);

Now the Label text should automatically scale when the text control changes size. Yay!

Modifying the code for RichTextLabels

RichTextLabels are a bit more complex, because they have multiple font sizes inside their theme (for the "normal" font, italic, bold etc.).