This guide will show you how to implement your font files in Sound Alerts by adapting the CSS (Cascade Style Sheets) in your streaming software. This is a great way to give your livestream and Sound Alerts a personal touch.

Pick and customize your font

  1. Visit https://fonts.google.com — you can select and customize various fonts here.

How to use your customized font for Sound Alerts 1.png

  1. Select and customize the font that you find the most appealing. We will use Chivo Mono and adjust some things via the "Type tester".
    Please note that the number of customizable options can differ from font to font.

How to use your customized font for Sound Alerts 2.gif

  1. Now, we select the first style (this is the one we customized) to add it to the "family" section.

How to use your customized font for Sound Alerts 3.gif

  1. Search inside the "selected family" section on the right for the "@import url(…" and for the "CSS rules to specify families" part beneath, which we will both need for the next steps.

How to use your customized font for Sound Alerts 4.png

Implementing your font in the CSS of OBS

Now that you have customized your font, it is time to implement it into your streaming software/broadcast tool.
We will use OBS for the following example.

  1. Open OBS, click on your Sound Alerts browser source to open its settings and scroll to the CSS part.

How to use your customized font for Sound Alerts 5.png

  1. Insert the "@import url(..)" text of the font of your choice.

How to use your customized font for Sound Alerts 6.png

  1. Insert the "CSS rules to specify families" part afterward like this:

How to use your customized font for Sound Alerts 7.png

Please note that you have to add "* {" before and "}" after this section as shown in the Screenshot above.

  1. The last step is to include "!important;" after the ";" of the "CSS rules to specify families" part.

How to use your customized font for Sound Alerts 8.png

The final code for this example in the box should look like this:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@1,602&display=swap');

* {
font-family: 'Chivo Mono', monospace; !important;
}

Everything is ready to go now, and your Sound Alerts should be displayed in your font.

How to use your customized font for Sound Alerts 9.png

If you have any questions, please join our Discord Server. Our staff is happy to help you!

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

Contact us
More articles
Timer Widget
Timer Widget

The Timer Widget is a great tool to let yourself and your community track time and is a must-have when engaging in speedruns. If you want to set up a Timer Widget for your stream, this article will guide you step by step through the process.

Posted by Mr. Leeroy
0
Emote Wall
Emote Wall

One of the features of the Scene Editor is our new Emote Wall widget. With this widget, the emotes your community posted in the chat will be shown in the livestream.

Posted by Mr.Bubi
28
How do I set up Text-to-Speech Alerts for Sound Alerts?
How do I set up Text-to-Speech Alerts for Sound Alerts?

Sound Alerts offers a Text-to-Speech (TTS) feature, which allows your viewers to send individual messages read out directly in the livestream. This article will show you how you can set those up.

Posted by Mr.Bubi
9