Accessibility for people with visual impairment or dyslexia is important and with the right method it’s really not hard to implement! I initially struggled to find online discussions about this and the ones I found all suggested making multiple Themes with different fonts which has problems like being difficult to maintain, tedious to make, especially if you like to use multiple themes for different purposes, and forbidding the use of font theme overrides.
Here is my solution:
- Create a FontVariation resource for each time you need a different font in your UI. For example, text_body.tres, one header.tres, warning.tres etc… depending on your needs. These are what I like to call “proxy fonts”.
- Build your Theme or UI with direct theme overrides using your FontVariations ‘proxies’ instead of your ttf files. Typically set the `base_font` parameter to the default non-accessibility font you need so you can preview your work just like if you used the FontFiles directly.
- At runtime, you can now load the resource
var my_proxy:FontVariation = load(“res://fonts/proxies/my_proxy.tres“)and then simply change itsbase_fontfield to the accessibility font likemy_proxy.base_font = load("res://fonts/ttf/open_dyslexia.ttf") - This will instantaneously update every single control node that uses a proxy as a font override.
I also made a video tutorial about it https://www.youtube.com/watch?v=8n7Tc9I2tIQ