Fonts and Colors

The easiest way to customize your story’s fonts and colors is with the Style backstage tab¹, which sets values in the config.style object for you. As you make changes in that tab, your story’s appearance will automatically update, so you can easily experiment to find a look that fits your story. However, changes you make will not be permanently saved. The next time you test or play your story, it will revert back to its previous appearance.

In order to make changes in the Style tab permanent, you must copy the code in the Config panel at the top of the tab into your starting passage’s vars section. (This passage is shown with a rocket-ship icon in Twine’s story map.) Clicking anywhere in the box the code sits in will automatically select all of it to make copying and pasting easy.

Doing so will cause the appropriate variables to be set when your story first begins–which doesn’t mean that it has to be the only appearance your story takes on. You can change variables in the config.style object in a later passage’s vars section and your story’s appearance will change when the passage is visited. You could use this, for example, to denote a dream sequence or flashback.

The other panels in the Style tab, Page, Header, and Footer, all have the same fields. As you might guess, Page sets the base style of your story and Header and Footer govern the areas above and below the main text. By default, Chapbook stories don’t have a header.

The values you set for page, header, and footer styles inherit from each other. That means that if a header or footer style value isn’t set, it will use the corresponding page value instead. If a page value isn’t set either, Chapbook’s default style will be used instead.

Setting Text Style