There are three ways to set a new font for your joystick chat overlay in OBS, depending on where the font is hosted. All three methods require that you are using the chat overlay found at https://joystick.tv/scenes
I'm only going to outline two of the methods at this time because they are the two easier methods and 99.97% of you won't need the third method, which involves writing custom CSS font families for fonts stored online.
You can set things such as size and color in the browser. Changing the font however is slightly more involved.
In the Properties for the browser source (which you can access by right clicking the source in OBS) there is a section called Custom CSS. CSS stands for "cascading style sheets," and is a way to tell your computer how to format text and web pages.
What matters for us is that you can tell OBS to override some of the CSS of the overlay with new CSS code in order to change the appearance of the overlay.
This is the method you will use to set your overlay to a font that you have installed on your computer. This is the easiest method, and the one I recommend.
Although the chat overlay will be seen by your viewers, the browser source that it appears in is running on your machine, and so you are the only one who needs to have the font installed in order to use this method.
Download and install a font, or pick one that you already have, and make a note of its EXACT name (spaces and capitalization matter here), as it appears when you select it in a word processor, or as it is written at the top when you preview the font.
For this method, you will add a single property to the Custom CSS box in the OBS browser source, within the body{} section. It will say font-family: and then the exact name of the font, in quotes, followed by a semicolon. For instance. font-family: "This Cool Font";.
Putting it all together, your custom CSS should look something like this:
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; font-family: "Liberation Sans";}
Google hosts a variety of diverse fonts at https://fonts.google.com.
If you find one that you like, there, you can use it easily in your chat overlay by clicking on it and then clicking the blue "Get Font" button in the upper right. Then you can either download and install the font as normal, using the instructions above for local fonts, OR you can use the version hosted right on google's webpage.
Either will work basically identically in the end, and honestly I recommend installing the font you want locally and using the instructions above, because it's just easier, but if you don't want to have the font on your machine, you can use this method.
To use the web hosted version, click the blue "Get embed code" button, and you will be directed to a page where there is pair of radio buttons, one says "<link>" and the other says "@import". Click the @import button, and you will be shown some CSS code. You are interested ONLY in the code between the <style> and </style> tags. It will say something like @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
This url will go at the beginning of the Custom CSS in OBS, before the body{} section, and will tell OBS that the specifics of the fonts you are using are from the imported url.
Then you will add the font_family: "The Font Name"; to your CSS as above, inside the body{} section, using the exact font name you imported.
For instance:
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; font-family: "Archivo Black";}
Usually when defining a font family, you use a list of fonts separated by a comma, denoting a first choice, second choice, third choice, etc. This is in part because web developers can't know what fonts are available on a viewer's machine and because links to imported fonts might break with time. In the case of these OBS overlays, the actual browser source is only open on your own computer, and so naming second or third options is unnecessary.
In addition to chosing a typeface, you can use font-style: italic; to make text italic, or bold using font-weight: bold;. You can even add cool shadow and glow effects with the text_shadow property! Just make sure that the "Outline with Color" property on the overlay menus is set to transparent, or it will override your CSS.
There is a lot more you can do with CSS. Have fun looking around online at what CSS can do, and experimenting with it in OBS! You're sure to find ways to make your stream truly unique!