Changing typeface for HTML/ASCII elements?

Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

Hello all!
I’m currently using Twine to write an at-the-table ‘computer console’ for a TTRPG session. The console contains a lot of ASCII elements (for titles, maps, et cetera) and while I have figured out how to get the ASCII to function correctly I’d like to change the typeface it uses to display HTML/raw text elements so it matches with the rest of the type in the game.

Below is an example passage that contains both text:

:: Deckplan
<div class="leftcolumn">
<html><pre style="line-height:1">
    N
 W Q│Q H
 │ Q│Q │
 B Q│Q O
 │ Q│Q │
 │  │  │
┌┴──G──┴┐
│   │   │
T  L│L  T
│   │   │
│   C   │
│       │
└───H───┘</pre></html>
</div>
<div class="rightcolumn">
<<type 5ms>>
N] Navigation 
Q] Officer/Scientist Quarters
G] Galley
L] Laboratories
C] Computer Module
W] Weapons Control
B] Crew Barracks
H] Cargo Hold
O] Life Support
T] Thruster access
D] Hyperdrive access
<</type>>
</div>

The following is the relevant selectors my CSS stylesheet. As you can see, while it does display the ASCII and the text correctly, it uses some system font for the ASCII whereas I’d like it to use the same typeface as the text in the right column.

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
body {
  background-color: DarkSlateGray;
  color: LightGreen;
  text-align: center;
  font-family: 'VT323', monospace;
}
.leftcolumn {
	float: left;
  	width: 55%;
  	margin-right: 5%;
    font-family: 'VT323', monospace;
  font-size: 30px;
  line-height: 30px;
}
.rightcolumn {
 	margin-left: 60%; 
    font-family: 'VT323', monospace;
  font-size: 30px;
  line-height: 30px;
}

I’ve tried enclosing the ‘html/pre’ elements in all kinds of divs and spans but to no success. It feels like a pretty basic CSS issue if it’s solvable but if it’s one of those things that you can’t override (like things in a element can’t ever not be the system font) then would appreciate knowing that too.

Thanks so much for all the help!

You probably need to override the css for the pre element.
Try adding a rule like

pre {
 font-family: 'VT323', monospace;
 font-size: 30px;
 line-height: 1;
}

to your css.

Also you don’t need to enclose your pre tags in html tags.
So:

:: Deckplan
<div class="leftcolumn">
<pre>
    N
 W Q│Q H
 │ Q│Q │
 B Q│Q O
 │ Q│Q │
 │  │  │
┌┴──G──┴┐
│   │   │
T  L│L  T
│   │   │
│   C   │
│       │
└───H───┘</pre>
</div>...

Very helpful, thank you! got things working.