Can I display more than one font at a time?

I’m just looking into Adventuron and was wondering if it’s possible to output certain text in a different font. Like, one line uses the a certain font and then the one below uses a different font.

I understand how the documentation allows you to add new fonts and create themes. I see how you can change colours in the middle of a string of text, but I don’t see the ability to change fonts.

Any help is greatly appreciated.

2 Likes

As far as I’m aware, there isn’t a way to do this - because fonts can only be changed via themes, and as soon as you change the theme, it changes the whole screen so that everything is shown in the new font.

You can change colours and make text bold, italic, differently aligned etc.

3 Likes

Dee beat me to it: there’s no native way to switch between fonts like that. The text formatting codes allow for alignment, emboldening, italicising etc within the same font, but switching themes resets the font globally (so all text on screen will switch to the new font).

However, there are one or two ways that you cobble it together and/or sort of fake it (“cobbling together” and “sort of faking it” being staple techniques - perhaps the main techniques - employed by the serious Adventuron enthusiast).

For example, you could display a graphic of some text in a different font, or you could use a unicode font translator like this one: Text Fonts (𝓬𝓸𝓹𝔂 𝓪𝓷𝓭 𝓹𝓪𝓼𝓽𝓮) ― LingoJam and copy and paste text from there into a print statement within your existing theme, and most of the time (but not all of the time) that will work!

3 Likes

I appreciate the replies. The “faking it” ways are quite clever actually. If I figure out a way to use multiple fonts (like how they are added as base64 in a theme) in Adventuron, I’ll be sure to share!

I’ll be learning it regardless so it’s nice to know there are a couple of people who frequent these forums that know Adventuron. You’ll be sick of me soon enough. :wink:

3 Likes

Don’t forget that you can use any Google font, so you should be able to use the same technique to do your own thing. I haven’t tried this myself, but I imagine that you can take your basic Truetype font and use a tool that allows you to add the extra glyphs you need from another Truetype font. Convert the extended font file to a woff2 format file and include this as an external resource in the assets section.

There are some Adventuron regulars here, but if you think the Adventuron category looks a bit quiet, it’s because most of the action takes place on the Adventuron Discord server. It’s worth signing up if you’re a Discord user.

1 Like

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.

  1. 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."
  2. Compile the game as HTML.
  3. 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;
}
  1. 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. :wink:

4 Likes

That’s a pretty neat hack. Inconvenient, but neat.

2 Likes

Wow, that hack is several orders of magnitude above my pay grade! String and sticky tape is about as sophisticated as I get with my workarounds. Glad to see there is a proper technical solution to this.

2 Likes

@adventuron would be tearing his hair out…if he had any to tear out.

2 Likes

I’m pretty sure he looked like Rapunzel before this whole Adventuron thing started!

2 Likes

I too have no hair left, but I refer to it as male pattern badness! :wink:


I may use the hack or not; I prefer more solid solutions. But I’m just starting and I had an idea for a game where it provides normal feedback about what you do and also how it might affect things in the “other dimension”. It would enhance the player’s experience to provide that information with more than just a different colour, I think. It’s good to just have options in your back pocket, is all.

1 Like