Size the source properly, then never scale it
A Browser Source renders the page at exactly the width and height you type into its properties. OBS then scales that finished bitmap into your scene. Rendering at 500×200 and stretching it to 1000×400 in the scene is upscaling a screenshot — the text goes soft and no font setting will bring it back.
Set the width and height to the size you actually want on screen and leave the transform alone. If a source is already stretched, right-click it, choose Transform, then Reset Transform, and fix the numbers in the source properties instead.
Rule of thumb: if you ever find yourself dragging a corner handle to make an overlay bigger, you want a bigger source, not a bigger box.
Turn off "Shutdown source when not visible"
This one produces the most confusing symptom of all: a widget that works, then silently stops. With the option enabled, OBS destroys the page whenever its scene is not active. The live connection dies with it, and when you switch back the widget reconnects from nothing.
For anything counting live — a sub count, a subathon timer, a goal bar — that reads as "the number is stuck". Leave the option off and the page stays connected in the background, ready the moment you cut to the scene.
"Refresh browser when scene becomes active" is the opposite trade. It does guarantee fresh state, but it also restarts every animation each time you switch scenes. Off for counters and timers; harmless for alerts.
Frame rate: 30 is usually the right answer
Use a custom frame rate only when you know why. Matching the source to your stream output is enough — running a browser source at 60 FPS while you stream at 30 spends CPU rendering frames nobody will ever see. The exception is an overlay with constant motion, like an avatar crowd or a spinning wheel, where 60 is worth it if you are streaming at 60 anyway.
The "it works on the second try" bug
If a source renders black on first load and fine after a refresh, that is usually the GPU, not the page. Check that browser hardware acceleration is enabled in OBS under Settings, then Advanced. On a laptop with switchable graphics, force OBS onto the dedicated GPU in your driver settings — that fixes a whole class of black-on-first-load reports that no amount of source tweaking will.
Custom CSS is for hiding things, not fixing things
OBS injects a small default stylesheet into every Browser Source that makes the page background transparent. Keep it. Adding to it is fine — hiding a scrollbar, nudging one element a few pixels — but if you are rewriting an overlay’s layout in Custom CSS, the setting you actually wanted is nearly always the source’s width and height.
The checklist
- Source width and height equal the size you want on screen; transform left at 100%.
- "Shutdown source when not visible": off.
- "Refresh browser when scene becomes active": off for counters and timers.
- Frame rate matched to your stream output, not above it.
- Default Custom CSS left in place.
- Still wrong? Right-click the source and choose Interact — you will see exactly what the page itself is doing.
Every Streamities widget is a plain URL in a Browser Source, so all of the above applies to all of them — and each widget’s own setup guide lists the width and height worth starting from.