Text Styles

A text style is a look for text: its font, fill, outlines, shadow and more. Design it once, then pick it wherever text needs it. Change the style later and every place that uses it follows.

The Text Styles page

Open Editors → Text Styles in the sidebar. You'll see two kinds of style:

• Built-in styles come with Community. You can't change them, but you can use them anywhere.
• Your styles are the ones you make.

Use New style to start from scratch: name it, and it opens in the editor. Filter by All, Built-in and Mine. Search and sort help once your list grows. Each of your styles shows its own sample text.

Each style has a menu:

Action	What it does
Edit style	Opens your style in the editor.
Duplicate to edit	Built-in styles only. Makes your own copy to edit.
Rename	Changes the name.
Duplicate	Makes a copy to start from.
Delete	Removes the style.

note

Deleting a style doesn't break your overlays. Anywhere it's used keeps drawing in it until you pick another style.

The style editor

The editor opens full screen in its own tab, so you can keep your overlay open beside it. A live preview is on the left, and the effects are on the right.

Effects

Each effect is a section: click its header to open its settings. Optional effects have a switch, and turning one on opens it.

Effect	What it controls
Font	The typeface and weight.
Fill	A solid colour, or a linear, radial or conic gradient.
Outlines	Up to three, added with Add outline. They're drawn widest first.
Shadow	A drop shadow.
Glow	A soft halo around the text.
Extrude	A solid 3D edge behind the text.
Texture	A pattern over the fill.
Background box	A box behind the text.
Spacing & case	Letter and word spacing, upper or lower case, and slant.

Gradients

A fill or an outline can be a gradient. Drag its stops along the gradient bar, click the bar to add a stop, and click a stop to change its colour. A gradient takes up to 16 stops. For a hard edge between two colours, give two stops the same position. The dial sets which way a linear gradient runs, or where a conic one starts. For radial and conic gradients, drag the dot to move the centre.

Marked words

Switch the top bar from Base to Marked words to style the words you pick out. Marked words get their own fill, outlines, shadow, glow, extrude and texture. They share the base style's font, spacing and box.

A style with no marked words style still works. Marked words just take a default look.

The preview

Above the preview, pick a backdrop (blur, checkers, dark, light, or an image you upload) to judge the style against what's behind it on stream, and click a word chip to mark or unmark it. Under the preview, type your own sample text and set the size. The sample text saves with the style.

Saving

Name the style in the top bar's Name field. Changes save when you press Save or Ctrl+S, which saves the name, the look and the sample text together. Beside Save, the top bar shows Saved or Unsaved changes. Undo and Redo step through your edits. To copy a style, use Duplicate on the Text Styles page.

Changes go live

Saving a style updates every overlay that uses it, including the ones already running in OBS. There's no refresh and no need to re-save the overlay.

Using a style

• The Text widget has a Text style setting, and so does every other built-in text widget: Timer, Bubble Text, Text Ticker, Wave Text, Typewriter, Glitch Text, Neon Sign, Split-Flap Board, Scramble Text and Number Roller.
• Widgets with more than one kind of text have a style setting for each kind, such as Name style and Label style on goal bars, Title style and Heading style on the credits, and Label style on progress bars and the wheel.
• While a style is set, the widget's own font and colour settings are greyed out. Clear the style to use them again.
• Custom widgets can offer a style picker with the textStyle property type.
• Flows can choose a style at run time.
• A style can also come from a variable, so one button press can restyle many widgets at once.

Linking a style to a variable

A Text Style variable holds a style instead of a number or a word. Link a widget to it, and the widget follows the variable: change the variable and the widget redraws in the new style.

1. Make a variable and give it the type Text Style. You pick its value from style tiles, and it always holds a style. See Streamer Variables. Overlay variables can be Text Style too.
2. In the overlay editor, open a widget's text style setting. The style picker has a Variables tab beside All, Built-in and Yours. All shows the variable tiles too.
3. Pick a variable tile. Each one draws the variable's current style and shows the variable's name with a Variable marker.

The setting becomes a dynamic (</>) field. Its template is {{streamerVariables.variables.<name>}} for a streamer variable, or {{overlay.<name>}} for an overlay variable. Click the T toggle to unlink the widget. The template stays, so you can switch it back on. If you're comfortable with templates, you can also write any template that gives a style.

Example: switch your whole look with a button

You play a cozy game and a horror game, and you have a saved style for each kind of text: Cozy Title, Horror Title, and so on.

1. On the Streamer Variables page, make a variable titleStyle, type Text Style, set to Cozy Title.
2. In the overlay editor, open each title widget's style picker, choose the Variables tab and pick titleStyle.
3. Build a flow called "Horror mode". Start with a Stream Deck trigger. Add a Text Style Data node set to Horror Title, and connect it to a Set Broadcaster Variable effect for titleStyle.
4. Press the button on stream. Every widget linked to titleStyle, on every overlay already open in OBS, redraws in Horror Title. No refresh.

This works for styles you create later too, even while the overlay is open.

Theme objects

To switch several kinds of text together, use one variable that holds a whole look.

1. Make a custom type called Theme with three Text Style fields: title, body and alert.
2. Make a streamer variable of type Theme and pick a style for each field.
3. In the Variables tab, each field appears on its own, such as theme.title. Its template is {{streamerVariables.variables.theme.title}}. Link each widget to the field it should follow.
4. One flow with a Create Custom Object node wired into Set Broadcaster Variable switches every field at once.

Good to know

• A widget's own Font and Weight settings still apply on top of a linked style. Leave them empty for widgets that should follow a theme.
• Renaming or deleting a linked variable unlinks its widgets. They keep drawing the style they were linked with, until you link them to another variable.
• The overlay editor canvas shows the style the variable held when you linked it. It doesn't follow live changes. Your overlay in OBS does.