This article will show you how to edit the font for your widgets in the Sound Alerts Scene Editor. Moreover, we will show you how to select one of your font files by adapting the CSS of the browser source.

Creating a widget in the Sound Alerts Scene Editor

1. Visit your Sound Alerts Dashboard and visit your Scenes in the Overlays section.

How to customize your own font in the Sound Alerts Scene Editor 1.png

2.  If this is your first scene, click Create your first scene; otherwise, click on Add new Scene. This will take you to the Sound Alerts Ecene Editor page.

How to customize your own font in the Sound Alerts Scene Editor 2.png

3. Click Add New Widget. In this example, we are choosing a text widget, but you can pick and customize the font of every widget you want.

How to customize your own font in the Sound Alerts Scene Editor 3.gif

Now that you have created your widget, it is time to show you how to customize its font.

Customize your font

1. Adjust the size and position

You can adjust the position of your widget via drag-and-drop or by entering your desired coordinates.

How to customize your own font in the Sound Alerts Scene Editor 4.gif

2. Adjust the Opacity

The opacity indicates how much your widget stands out from the background, and you can adjust it simply by sliding the button on the sidebar.

How to customize your own font in the Sound Alerts Scene Editor 5.gif

3. Chose the font size and color

You can change your font size by inserting a new size value. When choosing the desired color, you can open a small window where you can drag-and-drop to the color of your choice or insert RGB values if you want it to be more precise. The box under Font Color displays the HTML code of the current color so that you can replicate it. You can also enter the HTML code of the color of your choice.

How to customize your own font in the Sound Alerts Scene Editor 6.gif

4.  Font Style and Family

The font style lets you choose if you want your text to be displayed in bold, italic, or underlined. The font family lets you select one of the fundamental designs for your font.

How to customize your own font in the Sound Alerts Scene Editor 7.gif

5. Text Alignment

This option lets you choose how your text should be aligned.

How to customize your own font in the Sound Alerts Scene Editor 8.gif

Congratulation! You have customized your font in the Sound Alerts Scene Editor!
If you want to know how to create your own font and implement it into the CSS of OBS, please check out our article here.

Also, please get in touch with our support staff if you have any issues or questions by visiting our Discord Server.

This is not the right solution? We are happy to help you!

Contact us
More articles
Alert Animation Store Showcase
Alert Animation Store Showcase

A smooth viewing experience needs some stylish visuals: You can enhance the look of your stream by using our Alert Animation Store in the Sound Alerts Dashboard.

Posted by mahween
18
How to customize your own Font in the Sound Alerts Scene Editor
How to customize your own Font in the Sound Alerts Scene Editor

This article will show you how to edit the font for your widgets in the Sound Alerts Scene Editor. Moreover, we will show you how you can select one of your font files by adapting the CSS of the browser source.

Posted by Mr. Leeroy
0
Alert Animation Editor
Alert Animation Editor

With the Alert Animation Editor, you can assemble an alert animation focused on your stream's requirements in a simple yet powerful web editor in the Sound Alerts Dashboard.

Posted by Mr.Bubi
1