In this article, <SMARTIDHOME> refers to /home/nexus, but this can be different depending on the setup.

:root {
  /* The font family. "--font-family-sans-serif" is the default font used by bootstrap. */
  --font_family: var(--font-family-sans-serif);
  /* The primary color (e.g. shown in the navigation header) */
  --color_ussp_primary: #00999980;
  /* The darker version of that primary color (e.g. shown as a header for forms) */  
  --color_ussp_primary_dark: #009999;
  /* The secondary color (e.g. shown in the left menu background) */
  --color_ussp_secondary:#D0D3DA;
  /* The tertiary color (e.g. shown in a submenu item) */
  --color_ussp_tertiary: #a2a2a2;
  /* The quaternary color (e.g. shown login page corner texts) */
  --color_ussp_quaternary: #ffffff;
  /* The background color of the login page */
  --color_ussp_login_background: #D0D3DA;
  /* The text color of the footer */
  --color_ussp_footer_text_color: #fff; 
  /* The background color of the footer when logged in */
  --color_ussp_main_page_footer_background: var(--color_ussp_primary_dark);
   /* The border top color of the footer when logged in */
  --color_ussp_main_page_footer_border: var(--color_ussp_primary);   
  /* The color of the header text on the dashboard */
  --color_grid_header_text:#a2a2a2;
  /* The color of the header on one grid item (process on dashboard) */
  --color_griditem_headline: #a2a2a2; 
  /* The color of the text in one grid item (process on dashboard) */
  --color_griditem_text: #a2a2a2;
  /* The color of an action item (e.g. the search) */
  --color_action_item: #2387AA;
  /* The color of the possible actions link */
  --color_possible_actions: #ffffff;
  /* The color when an action item is disabled */
  --color_disabled: #a2a2a2;
  /* The color of the background of the quick search buttons */
   --quick_search_btn_bg_color: tomato;
  /* The color of the quick search buttons when selected */
   --quick_search_btn_selected_color: black;   
  /* The size of the logo on the login page */
  --size_logo_login: 5rem;
  /* The size of the logo in the nav area */
  --size_logo_nav: 3rem;
}

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.

There is no automated update path for custom branding. It might be necessary to adapt the style with new releases because of changes in the standard software. Therefore, custom branding can cause additional efforts during update.