Thanks, Garry. Yeah, what you say about modifying a font file makes sense. I remember long ago making my own icons into a custom font with Inkscape at one point. Yeah, it’s entirely possible. Good call!
However, I got a little sneaky with the compiled HTML game file that Adventuron creates. Here’s a workaround that works after the HTML is compiled.
- Use a specific colour to denote the text that you want to change the font of:
"If everything works <this text<#06c>> should be a different font."
- Compile the game as HTML.
- Open the HTML file in an editor and add the following within the
<style>
tag (line 17) after the body { ... }
styling:
span[style*="rgb(0, 102, 204)" i] {
font-family: serif;
color: #fff !important;
}
- Save the file and test it in the browser.
The hexadecimal colour value in Adventuron #06c
is converted into an RGB value in the HTML file rgb(0, 102, 204)
. CSS allows for a selector that targets HTML tags with a specific attribute value string. In this case, all <span>
tags with a style
attribute containing the colour value of rgb(0, 102, 204)
are targeted and the font-family
and text color
are changed to whatever is desired.
Note: i
within the selector ignores the case of the letters. !important
overrides the colour set in the HTML by Adventuron. I determined that Adventuron creates <span>
tags to house the text by using the browser’s inspector CTRL + SHIFT + I.
In theory, you can even use the font-families imported in the themes of your Adventuron game without having to change the theme. I’ll test that out eventually, but seems sound. I know there are a lot of fonts included in the engine by default, that you can use: Bamburgh, DAAD, Clairsys_10, Delta_10, etc.
Again, this only works by editing the compiled HTML game, but as you can see, it’s a quick fix. When testing the game in Adventuron Classroom, you can’t make this change (so pick a pleasing colour code that represents the font you will be using), unless there is a way to add custom CSS within Adventuron’s language? Still, I can live with sky blue representing a certain font while testing.
If I figure out any other significant ways of improving this workaround, I’ll be sure to share. I can already see how you can target the command prompt and other specifics of the game’s text. Font size can also be changed independantly. I’ll make Adventuron look like a Twine game in no time.