Allow player to change font (Opendyslexic or else)

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
Ayael
Regular
Posts: 82
Joined: Fri Apr 07, 2017 2:17 pm
Projects: Imperial Grace (on going), Autumn Spirit, Ballads at Midnight
Contact:

Allow player to change font (Opendyslexic or else)

#1 Post by Ayael »

Hi guys, accessibility is important, so you might be interest to add an OpenDyslexic font to your game, or even just several option (a fancy one and a sans serif one for example).

→ If you want to change only the in game font please look at this great tutorial about font selection from BáiYù.

→ If you want to change all the font (so in game, interface like menu button and character name), there is two possibility :
1) All your fonts are the same
2) All your fonts are different (more likely).

1) All your font are the same.
Step 1 : put all your font, including OpenDyslexic into your game folder. (You can find it here)
Step 2 : Go into your gui.rpy file, and look for this piece of code

Code: Select all

## Fonts and Font Sizes ########################################################

## The font used for in-game text.
define gui.text_font = "DejaVuSans.ttf"

## The font used for character names.
define gui.name_text_font = "DejaVuSans.ttf"

## The font used for out-of-game text.
define gui.interface_text_font = "DejaVuSans.ttf"`
and delete it.

step 3 : Instead put :

Code: Select all

## The font used for in-game text.
define gui.text_font = gui.preference("font", "DejaVuSans.ttf") 

## The font used for character names.
define gui.name_text_font = gui.preference("font", "DejaVuSans.ttf")

## The font used for out-of-game text.
define gui.interface_text_font = gui.preference("font", "DejaVuSans.ttf")
(replace DejaVuSans by your own font. Please be careful, there is too common format .ttf or .otf don't forget to change it accordingly ! All fonts must be the same otherwise look at the second part of the tutorial).

step 4 : Go into your screen.rpy, and look for your preference screen find this line :
## Additional vboxes of type "radio_pref" or "check_pref" can be
## added here, to add additional creator-defined preferences.
Then add :

Code: Select all

vbox:
	style_prefix "check"
	label _("Font")
	textbutton _("Default") action gui.SetPreference("font", "DejaVuSans.ttf")
	textbutton _("OpenDyslexic") action  gui.SetPreference("font", "OpenDyslexic.otf")
(Once again, don't forget to change the DejaVuSans by our own font.)

Bonus : Add more font choices.
You can add as many font choice you want, at the end of the previous code inside the preference screen just add this line as much as you need :

Code: Select all

textbutton _("OpenDyslexic") action  gui.SetPreference("font", "Yourfont.otf")

2) All your font are different (so a font for in game, a font for buttons and so on.)

Step 1 : put all your font, including OpenDyslexic into your game folder. (You can find it here)
Step 2 : Go into your gui.rpy file, and look for this piece of code

Code: Select all

## Fonts and Font Sizes ########################################################

## The font used for in-game text.
define gui.text_font = "DejaVuSans.ttf"

## The font used for character names.
define gui.name_text_font = "DejaVuSans.ttf"

## The font used for out-of-game text.
define gui.interface_text_font = "DejaVuSans.ttf"`
and delete it.

step 3 : Instead put :

Code: Select all

## The font used for in-game text.
define gui.text_font = gui.preference("font_1", "DejaVuSans.ttf") 

## The font used for character names.
define gui.name_text_font = gui.preference("font_2", "DejaVuSans.ttf")

## The font used for out-of-game text.
define gui.interface_text_font = gui.preference("font_3", "DejaVuSans.ttf")
(replace DejaVuSans by your own fonts. Please be careful, there is too common format .ttf or .otf don't forget to change it accordingly !)

step 4 : go into your screen.rpy, and look for your preference screen find this line :
## Additional vboxes of type "radio_pref" or "check_pref" can be
## added here, to add additional creator-defined preferences.
Then add :

Code: Select all

vbox:
	style_prefix "check"
	label _("Font")
	textbutton _("Default") action [gui.SetPreference("font_1", "DejaVuSans.ttf"), gui.SetPreference("font_2", "DejaVuSans.ttf"), gui.SetPreference("font_3", "DejaVuSans.ttf")]
	textbutton _("OpenDyslexic") action [ gui.SetPreference("font_1", "OpenDyslexic.otf"), gui.SetPreference("font_2", "OpenDyslexic.otf"), gui.SetPreference("font_3", "OpenDyslexic.otf")]
(Once again, don't forget to change the 3 DejaVuSans by our own fonts.)

Bonus : Add more font choices.
You can add as many font choice you want, at the end of the previous code inside the preference screen just add this line as much as you need :

Code: Select all

textbutton _("Font name") action [ gui.SetPreference("font_1", "YourFont.otf"), gui.SetPreference("font_2", "YourFont.otf"), gui.SetPreference("font_3", "YourFont.otf")
It can be 3 different font if you wish.

And that's all, I hope it will be useful !

3) Adjust font size
OpenDyslexic is a font really bigger than other traditional font. It can then cause problem (text too big for the texbox, overlaping in game menu and so on). There is a simple solution to fix it, into your gui.rpy just at the begining after the :

Code: Select all

init python:
add (don't forget to indent) :

Code: Select all

config.ftfont_scale["OpenDyslexic.otf"] = .7
It will automaticaly scale.to your actual font. (You can change the number if you want it bigger but .7 is normally a good ratio).

Code: Select all

config.ftfont_vertical_extent_scale["OpenDyslexic.otf"] = .8
Will automatically reduce the line spacing.



(Turorial based on this great doc : https://www.renpy.org/doc/html/gui_advanced.html)
(To use this tutorial, your renpy version should be 6.99.4 or more)
Thanks to Rob in the Renpy discord for the scaling solution
Last edited by Ayael on Thu May 12, 2022 12:04 pm, edited 1 time in total.
Image Image

Ayael
Regular
Posts: 82
Joined: Fri Apr 07, 2017 2:17 pm
Projects: Imperial Grace (on going), Autumn Spirit, Ballads at Midnight
Contact:

Re: Allow player to change font (Opendyslexic or else)

#2 Post by Ayael »

Short update to scale font size thanks to a message from Rob in the Renpy discord !
Image Image

Ayael
Regular
Posts: 82
Joined: Fri Apr 07, 2017 2:17 pm
Projects: Imperial Grace (on going), Autumn Spirit, Ballads at Midnight
Contact:

Re: Allow player to change font (Opendyslexic or else)

#3 Post by Ayael »

Little update, it seems you can create custom new gui font. For example, I wanted a different font for my nvl_dialogue text (I believe it take this front the regular text one) so I add in gui.rpy with the other:

Code: Select all

define gui.nvl_dialogue_text_font = gui.preference("font_2", "myfont.ttf")
and then in screen.rpy.

Code: Select all

style nvl_dialogue:
    font gui.nvl_dialogue_text_font
And it works !
Image Image

Gouvernathor
Newbie
Posts: 23
Joined: Thu Aug 06, 2020 9:27 am
Github: Gouvernathor
Discord: Armise#6515
Contact:

Re: Allow player to change font (Opendyslexic or else)

#4 Post by Gouvernathor »

I believe code readability could be improved by having "main_font" (or just "font"), "name_font" and "interface_font" instead of "font1", "font2" and "font3".
But that's a detail if the properties aren't accessed anywhere else.

Also since the OpenDyslexic font comes in 4 variants, for bold, italics, both and neither (at least for the version I downloaded), you can add the following to ensure all variants are properly used :

Code: Select all

init python:
    config.font_replacement_map["OpenDyslexic.otf", True, False] = ["OpenDyslexic-Bold.otf", False, False]
    config.font_replacement_map["OpenDyslexic.otf", False, True] = ["OpenDyslexic-Italic.otf", False, False]
    config.font_replacement_map["OpenDyslexic.otf", True, True] = ["OpenDyslexic-BoldItalic.otf", False, False]
The documentation for this part is found here https://www.renpy.org/doc/html/text.htm ... eplacement
After doing that, the config.ftfont_scale line must be applied to each variant.

Great work !

Ayael
Regular
Posts: 82
Joined: Fri Apr 07, 2017 2:17 pm
Projects: Imperial Grace (on going), Autumn Spirit, Ballads at Midnight
Contact:

Re: Allow player to change font (Opendyslexic or else)

#5 Post by Ayael »

I didn't know about font variants! Since it works without it, I always assume it was kind of magic, but the right file actually look better, thanks for your contribution!
Image Image

User avatar
Kornyart
Newbie
Posts: 20
Joined: Mon Jan 25, 2021 1:18 pm
Completed: Mindworks: The Great Division
Projects: Mindworks: the great division
itch: Kornyart
Contact:

Re: Allow player to change font (Opendyslexic or else)

#6 Post by Kornyart »

this thread is gold, thank you so much for this!

User avatar
Nighten
Regular
Posts: 48
Joined: Fri Jan 26, 2018 12:29 am
Completed: Vincit, Sentiment Enneigés, The Devil took my Candies
Github: NightenDushi
itch: nighten
Location: France
Discord: Nighten#3081
Contact:

Re: Allow player to change font (Opendyslexic or else)

#7 Post by Nighten »

Thanks for the thread, it really helped!
Since Renpy has an accessibility menu built in now, you also can also use the action Preference("font transform", ...) used in this menu; and it's already well configured! You can find the code here on github.

Code: Select all

# copy pasted from the link above
 vbox:

                    label _("Font Override")

                    null height 10

                    textbutton _("Default"):
                        action Preference("font transform", None)
                        style_suffix "radio_button"

                    textbutton _("DejaVu Sans"):
                        action Preference("font transform", "dejavusans")
                        style_suffix "radio_button"

                    textbutton _("Opendyslexic"):
                        action Preference("font transform", "opendyslexic")
                        style_suffix "radio_button"
If you need help with your project, you can hire me as a programmer! :D

Image ImageImage

Ayael
Regular
Posts: 82
Joined: Fri Apr 07, 2017 2:17 pm
Projects: Imperial Grace (on going), Autumn Spirit, Ballads at Midnight
Contact:

Re: Allow player to change font (Opendyslexic or else)

#8 Post by Ayael »

Thanks for the notice!
Image Image

User avatar
Kinmoku
Miko-Class Veteran
Posts: 591
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: VIDEOVERSE
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Allow player to change font (Opendyslexic or else)

#9 Post by Kinmoku »

This is a great thread! My default font is a pixel font, but I want to add the option for a clear sans serif font (using DejaVuSans.ttf at the moment).

Is there a way to change the antialiasing as well? Because my default font is pixel, I have this:

Code: Select all

style default:
    antialias False
    properties gui.text_properties()
    language gui.language
But it doesn't look very nice when I switch to DejaVuSans as it's still doesn't have antialiasing.

Also, is it possible to have a toggle radio button instead of two font buttons? I think it would be nice if the textbutton could either switch the font on or off (like the ToggleField one before it):

Code: Select all

vbox:
                    style_prefix "radio"
                    label _("Text and Accessibility")
                    add Frame("underline", left=1, top=1, right=1, bottom=1, xysize=(408, 4))

                    null height 20
                
                    textbutton _("Type to Reply") action ToggleField(persistent, "press_to_type")
                    textbutton _("Clear Font") action Preference("font transform", "dejavusans")

Post Reply

Who is online

Users browsing this forum: No registered users