> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remapdb.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors and typography

> Set your primary font and customize widget colors and sizes for a consistent brand look.

Use this page to match widget typography and color style to your website design.

Click the [**Branding**](https://app.remapdb.com/widget/branding) item in the main navigation.

## Primary font

In the **Fonts** section, the **Primary Font** dropdown controls the main widget font.

What to expect:

* Fonts are provided from Google Fonts.
* Changing **Primary Font** updates widget text style.
* If custom fonts are not available on your account, this control can be disabled.

### Change the primary font

1. In **Fonts**, open **Primary Font**.
2. Click the font you want.
3. Wait for save confirmation and preview refresh.
4. Check readability for headings, labels, and buttons.

## Colors and sizes customizer

The **Customize colors and sizes ...** row opens a side panel for visual styling.

Important: this side panel follows your main **Theme** setting from the Branding page.

* If **Theme** is set to **Light**, the side panel works in Light only.
* If **Theme** is set to **Dark**, the side panel works in Dark only.
* If **Theme** is set to **Auto**, the side panel supports both Light and Dark color values.
* In **Auto**, a **Light theme / Dark theme** switch is available at the top of the side panel so you can review both sets.
* In **Light** or **Dark**, that top switch is hidden because the widget is locked to one mode.

There is no separate standalone preview mode setting in this panel.

In this side panel, you can:

* Adjust color values for key widget areas.
* Adjust size-related values where available.
* Save your styling changes.

<Steps>
  <Step title="Click the Customize colors and sizes ... row." />

  <Step title="Check your main Theme setting first (Light, Dark, or Auto), because it controls what color values are shown in the side panel." />

  <Step title="Open one variable group at a time and adjust values gradually." />

  <Step title="Check key UI areas after each change: text, buttons, forms, dropdowns, and chart." />

  <Step title="Click the Save button in the side panel." />

  <Step title="Recheck the result on a live page, not only in preview." />
</Steps>

## If some styling controls are limited

If you see limited controls or upgrade prompts in the customizer, this means your current access includes only part of the styling set.

<Info>
  Styling depth depends on your [plan](https://app.remapdb.com/settings/billing) and [feature access](/feature-availability-by-plan).
</Info>

## Good practice

* Start with text contrast and readability first.
* Keep one consistent button style across all widget states.
* Test both desktop and mobile before finalizing.
* Apply small changes in batches so issues are easy to track.

## Related actions

* [Branding](/widget/branding)
* [Theme and layout](/widget/branding/theme-and-layout)
* [Custom CSS styling](/widget/branding/custom-css-styling)