Smart ID Self-Service offers the possibility to select a customized branding, for example to adapt logos, colours and fonts.

Customize the branding

Go to the folder <SMARTIDHOME>/docker/compose/seflservice/config/branding.
Copy the default folder and select a new name for the copied folder.
In the new folder, to reflect your custom branding, you can:
1. change colours and fonts in theme.css file.
2. change the logo by replacing logo.png with your own (name must be logo.png)

...

Note

title	Customizing Fonts

A few things to know before changing the font in Smart ID Self-Service:

You should always define at least two fonts, because if the browser is not able to render a character using your first font, it will fall back on the next one in the list, and so on.
The css variable "--font-family-sans-serif" comes from bootstrap and allows for high compatibility on all devices (Windows, Mac, Android, and more...). It is suggested to keep it as a fall back, in case the browser is not able to render one of the characters using your own font.

If you are unsure about what values to use, check out the definition of the font-family css property.

Select the branding

Edit the Self-Service configuration file located at<SMARTIDHOME>/docker/compose/selfservice/config/config.json.
Change the parameter theme to the folder name you created in "Customize the branding"
Code Block
language text
title Example: default branding
"theme": "default"

...