Change the font family
MagicBell uses system fonts by default ('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif'). But you can change this in 2 easy steps.
- Override the default theme setting the name of the font family for the elements you want to be affected
- Provide the stylesheets that contain the definition of the font you want to use
In the following example, we are changing the font to IBM Plex Sans, a font available at Google Fonts.
ESM
You don't need to provide the url of your fonts if the font is a web safe one.
The MagicBell widget sets 500 as the notification's title weight. Therefore, make sure to include in the 200 and 500 weight variations, as shown in the previous example.
Change the font size
Pass the font size to all elements you want to customize. In the following example we show how to set 16px as the font size for notifications in any state and 13px for the header:
ESM