Skip to main content
Appearance

Customizing Customer Portal appearance

Set your brand, colors, theme, fonts, and sharing image, then preview your Customer Portal and Help Center.

Written By Markus Palm

Last updated About 2 hours ago

Overview

Use Brand & colours to change your Customer Portal's name, logo, colors, theme, fonts, and social sharing image. Preview the result beside the settings before you save.

You need the Manage Branding permission. The Customer Portal uses your default brand. Fonts apply across the portal and every Help Center, including Help Centers connected to other brands.


Open the appearance settings

Go to Settings → Customer Portal → Brand & colours. After changing the name, colors, theme, or fonts, click 'Save changes' in the page header. Logo and social preview uploads save immediately.

If you use multiple brands, select the brand you want to edit. Other brands have their own appearance for their connected Help Centers. Site-wide fonts and the visitor theme toggle stay on the default brand.


Set your brand and colors

Under Brand, change the Name or upload your Logo. The logo is also used as the favicon. These are the same brand settings used in Workspace branding.

Under Colors, choose:

  • Primary color: The color for links, buttons, and votes in light mode

  • Primary color (dark mode): The primary color for dark mode. Leave it empty to derive it from the light primary color

  • Light background and Dark background: The page backgrounds. Leave an override empty to use the default

Under Advanced, you can override the accent for each theme. Leave these fields empty to derive the accents from the primary color. If you choose a light color for Dark background, Featurebase adjusts it to a darker shade.

Choose the theme

Under Light & dark mode, set Default theme to Light, Dark, or Follow the visitor's system setting.

Keep Show light & dark toggle on to let visitors switch themes. Turn it off to keep the default theme.


Fonts

Set a font for Headings and another for Body. The default is Inter. Use a listed Google Font, upload a font file, or link to a hosted font.

Choose a font from the list

  1. Under Fonts, open the menu beside Headings or Body

  2. Choose a font from Sans, Serif, or Mono

  3. Optional: choose a weight from the adjacent menu

  4. Check the preview, then click 'Save changes'

The weight menu lists the selected font's available weights. Default keeps the standard weights. A number sets one weight for all headings or all body text.

Upload a font file

Use a .woff2, .woff, .ttf, or .otf file up to 2 MB. Font names can contain letters, digits, spaces, and hyphens, up to 64 characters.

  1. Open the font menu and choose 'Upload a font…'

  2. Select the file and check the suggested name

  3. Click 'Upload', then 'Save changes'

The row shows Custom file and the font name. Click 'Replace' to change the file. Custom fonts offer weights from 100 to 900; choose a weight your font supports.

Use a font URL

Use a Google Fonts link starting with https://fonts.googleapis.com/css2, or an HTTPS link to a .woff2, .woff, .ttf, or .otf file.

  1. Open the font menu and choose 'Use a font URL…'

  2. Paste the link

  3. For a font file, enter a font name. Google Fonts links supply the name automatically

  4. Click 'Use', then 'Save changes'

Important: The font host must allow cross-origin font requests. Otherwise, browsers cannot load the font and show a system font instead.

Reset a font

Choose Default (Inter) in the font menu. For an uploaded font or URL, click 'Remove' beside its name. Then click 'Save changes'.


Set the social sharing image

Upload an image under Social media preview. It saves immediately and appears when someone shares a Customer Portal link. The recommended size is 1200 × 630 pixels. Choose an image that stays readable in a small preview.


Preview the result

Switch the preview between Portal and Help Center. Check the colors, contrast, logo, and fonts together. Save your changes, then click 'View Customer Portal' to check the published result.

To change the menu or footer, use Customer Portal pages and navigation. For email styling, use Email customizations. To hide the attribution, see Removing Featurebase branding.


FAQs

No. Fonts apply to the portal and every Help Center. Other brands can have their own name, logo, colors, and theme, but their fonts use the site-wide settings.

The saved font does not meet a font rule, such as the font-name format. The message names the problem. Replace or remove the font to fix it.