[feature] Custom font support

[tilda]

Would like an option for custom font selection. None of the current options really are to my taste (I use Inter for my overlay and would like to keep the font on every widget/etc the same).

Edit: Temporary workaround in case you're in a similar situation:

• Go to your browser source settings
• Put this in "Custom CSS" (change inter to your preferred font):

#chat_container { font-family: "Inter" !important; }

• Profit

[arrowgent]

sure, just add a custom css file to your obs source

@font-face {
font-family: 'Fondamento';
src: url('C:\localfolder\foryour\fonts\fondamento.regular.ttf') format('truetype');
}

alternatively a webfont

@font-face {
font-family: 'Fondamento';
src: url('https://url.com/of/your/font/fondamento.regular.ttf') format('truetype');
}

then add this to your css file

body {
    font-family: 'Fondamento';
    font-weight: 700;
}

#chat_container {
    font-family: 'Fondamento';
}

#chat_container .message {
    font-family: 'Fondamento';
}

.user_info {
    font-family: 'Fondamento';
}

change the names as required

[CravenInsomniac]

@arrowgent I tried using a modified version of the method you recommended to have a separate font for the usernames and have not been having any luck. I'm using the following:

@font-face {
	font-family: 'Xirod';
	src: url('E:/Fonts/Typodermic Fonts/xirod/xirod.ttf') format('truetype');
}
@font-face {
	font-family: 'Xolonium';
	src: url('E:/Fonts/Cyberpunk Fonts/xolonium/xolonium-regular.ttf') format('truetype');
}
body {
    font-family: 'Xolonium';
    font-weight: 700;
}
#chat_container {
	font-family: 'Xolonium';
	background-color: rgba(0, 0, 0, 0);
	margin: 0px auto;
	margin-top: -5px;
	overflow: hidden;
}
#chat_container .message {
	font-family: 'Xolonium';
	background-color: rgba(0, 0, 0, 0);
	margin-top: -5px;
	margin: 0px auto;
	overflow: hidden;
}
.user_info {
	font-family: 'Xirod' !important;
	color: #00FFFF !important;
	display: block;
}

What am I doing wrong?

[ProjectXsent]

@arrowgent I tried using a modified version of the method you recommended to have a separate font for the usernames and have not been having any luck. I'm using the following:

@font-face {
	font-family: 'Xirod';
	src: url('E:/Fonts/Typodermic Fonts/xirod/xirod.ttf') format('truetype');
}
@font-face {
	font-family: 'Xolonium';
	src: url('E:/Fonts/Cyberpunk Fonts/xolonium/xolonium-regular.ttf') format('truetype');
}
body {
    font-family: 'Xolonium';
    font-weight: 700;
}
#chat_container {
	font-family: 'Xolonium';
	background-color: rgba(0, 0, 0, 0);
	margin: 0px auto;
	margin-top: -5px;
	overflow: hidden;
}
#chat_container .message {
	font-family: 'Xolonium';
	background-color: rgba(0, 0, 0, 0);
	margin-top: -5px;
	margin: 0px auto;
	overflow: hidden;
}
.user_info {
	font-family: 'Xirod' !important;
	color: #00FFFF !important;
	display: block;
}

What am I doing wrong?

Have you tried installing the font first in your system? If not, make sure to Install it to All Users (Right-click the font on your directory then there's the option).