Font, Color, and Style

In this section:

• Setting Fonts
• Setting Colors
• Styling Text

---

Stepworks supports Google Fonts via the $setfont command. Visit Google Fonts, get the name of the font you want, and use it like this:

$setfont:[Name of Google Font, including spaces]

Different stages will handle custom fonts differently. Also, occasionally you’ll run into a particular font that doesn’t work—for unknown reasons.

Stepworks supports the setting of foreground, middle ground and background colors. Most stages will support at least foreground and background colors. The colors can be specified in any format supported by CSS (hex, RGB, etc.) To set colors, use these commands:

$setforecolor:[CSS color]
$setmidcolor:[CSS color]
$setbackcolor:[CSS color]

Some Stepworks stages support additional styling options for text (you can check which by clicking “Technical notes” or “Notes” on the page for the stage. These settings and their formats are based on the analogous properties in CSS. Text styling options include:

$setfontsize:[size]
$setletterspacing:[spacing]
$setlineheight:[height]
$settextalign:[alignment]
$settexttransform:[text transform]
$settextshadowposition:[x y]

Just as you can use the @ character to indicate the volume of a step (see Adding Music for details), you can also use it to set the tone in which the current character is speaking—from a whisper to a scream—and when you do, some stages will interpret that tone visually by adjusting the size of the text. For example, Hello!@ff indicates that a character is screaming ‘Hello!’ and might cause the word to be displayed in a larger font than normal. Here’s how the @ commands map to different tones of speech:

Shortcut	Tone
@pp	whisper
@p	murmur
@f	shout
@ff	scream