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
Under Fonts, open the menu beside Headings or Body
Choose a font from Sans, Serif, or Mono
Optional: choose a weight from the adjacent menu
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.
Open the font menu and choose 'Upload a font…'
Select the file and check the suggested name
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.
Open the font menu and choose 'Use a font URL…'
Paste the link
For a font file, enter a font name. Google Fonts links supply the name automatically
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
Can each brand have its own fonts?
Can each brand have its own fonts?
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.
Why is my Google Fonts link not accepted?
Why is my Google Fonts link not accepted?
Use exactly one font family per link, with optional weights. For example: https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700. To use two families, put one in Headings and the other in Body.
What does "Not shown on your site" mean?
What does "Not shown on your site" mean?
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.