OBS UI Font

[Grampa Wild Willy]

I searched for this & didn't find a relevant discussion, which rather surprises me. Maybe I needed to look at more than 3 screenloads of search results. In any case, is there a way to make the GUI of OBS use a particular font?

 

[Suslik V]

You can set fonts for OBS UI only by modifying UI Theme files.

Examples of custom themes:

Themes

Themes for OBS Studio

obsproject.com

Old example of the theme modification:

Status bar font size and source window frame colour

First post so I hope this is the correct location. I did look in the Themes category but it says insufficient rights to post there. I'm using the default Dark theme but there are some areas I'd like to be black despite it already being a darkish grey. I don't need a whole new complete theme...

obsproject.com

 

[Grampa Wild Willy]

I think I need to explain something about myself. I spent several decades (now long retired) as a mainframe programmer. IBM 360 & its descendants. Mostly in assembler but plenty of Pascal, PL/1, COBOL, others. I worked in OS/MVT (& descendants), DOS (& descendants), & VM (& descendants). I am very comfortable doing geeky things. I also worked on documentation for a few years. I've never programmed a PC but I can read documentation. I'm not finding what I want.

I did locate this file on my system:

C:\OBS-studio\data\obs-studio\themes\Yami.obt

It contains this section:

QWidget {
alternate-background-color: var(--bg_base);
color: var(--text);
selection-background-color: var(--primary);
selection-color: var(--text);
font-size: var(--font_base);
font-family: 'Open Sans', '.AppleSystemUIFont', Helvetica, Arial, 'MS Shell Dlg', sans-serif;
}

I found this web page: https://doc.qt.io/qt-5/qwidget.html. The term font-family does not occur anywhere on that page. I'm not even sure how anyone would go about using what it says on that page. Who is the audience for that information?

I'm not finding any help. I don't want to adjust the colors of my OBS color scheme. What I have is fine. I don't want to change the size of the characters in the OBS GUI. What I have is fine. I just want to use a different font. What I see there on the font-family line is the names of either 5 or 6 font families. I'm not sure if sans-serif is an actual font family or just a parameter to something. I don't understand that line. Why are there 6 things listed there? How are they used? If I want to make all the characters in my OBS GUI -- the main window, the menus, the settings dialog, everything -- use the Georgia font, how do I do that? Do I just put the word Georgia into that font-family line? Do I put it in there in 5 places? 6 places?

This Yami.obt file is the only one I can find that mentions actual names of fonts. There's lots of references in the multiple other files in my themes directory tree to colors & font sizes but this is the only place I could find where it named a font. But what to do is not obvious & I don't want to break something to where I have to reinstall OBS yet again.

It's kind of shocking to me that adjusting such basic creature comforts as colors & sizes requires tweaking such arcane, poorly documented internal files. But whatever. I can deal with it. But only if I have documentation to rely on. I'm not finding the documentation I need. I'm not even sure what high-level category of subject matter I'm looking at.

I appreciate your assistance here. You seem to understand this at a pretty deep level. Please explain how I can get OBS to use a different font. Not font size. Not font color. Just font.

 

[Suslik V]

Qt module that OBS uses to draw its UI elements is modification/adaptation of web CSS (Cascading Style Sheets).
Some info specific to Qt can be found in this section of the Qt docs:

Qt Style Sheets Reference | Qt Widgets | Qt 6.9.0

doc.qt.io

More about CSS itself and its fonts styling system you may find in tutorials, like this (many fonts mentioned in one string because of fallback mechanism when some fonts not available on the user's system; OBS is multi-platform application, so there are always limits on what is available):

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Grampa Wild Willy]

It's all a bit opaque to me still. I looked at that Qt reference page. It says that several keywords are basically synonyms: font, font-family, font-size, font-style, font-weight. I think. I'm not entirely sure I understood what I was reading. I actually have had a bookmark for W3Schools for several years. I have occasionally looked things up there.

But the real help was your comment that, "many fonts mentioned in one string because of fallback mechanism when some fonts not available on the user's system." That got me to change this one line in the Yami.obt file I mentioned above. The line is in the bit of the file I quoted above that begins with "font-family." I duplicated the line, then commented out the original. That's a best practice in case something doesn't work. It lets you undo your mistake & restore things to their original state. That is, if you make a mistake. With any luck, you won't. I commented the line by surrounding it with /* */, following what I could see elsewhere in the file. Then I changed the line to this:

font-family: Georgia

Now my OBS looks like this:

Note how the characters have serifs. That was the biggest thing I wanted. To my eye, sans-serif fonts are just ugly. Seems to me I read once that serif fonts are easier to read. Your eyes tend to move faster over the text when the letters have serifs. Somebody did a scientific study & that was the conclusion. That is all nice & interesting but I don't really care about that. My personal taste is that serif fonts just look nicer.

So OK. My problem is solved. The solution is to modify that one line in that .obt file. One line. One change. Simple. I hope this discussion serves as the documentation of the missing feature in OBS. I still think it's ridiculous that the Appearance tab in the settings doesn't simply have a drop-down list of font names for you to choose from. It's all well & good that OBS has a multi-platform target audience. My OBS has only a single-platform target audience: me & my computer. I don't need "fallbacks." I just want to set my OBS font globally. It should not be necessary to delve into the bowels of the product & modify a file.

But this is the way things are. So it's safe to just change that one line in that one file & it's all good.

Thanks for your attention.