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

# Custom Colors and Fonts in Pop-ups and Embedded Blocks

Match your pop-ups and embedded blocks to your brand by setting custom colors and fonts. The form editor accepts the same color values and font families you already use on your website, so the form blends in instead of looking like a third-party widget.

## Pick the right colors

You have two reliable ways to find the exact colors your site uses:

* **Use a color-picker browser extension** like Eye Dropper. Open your website, click the extension, and hover over the element whose color you want. You'll get the exact HEX value.
* **Check your brand book.** If your company has documented brand colors, use the HEX values listed there.

Once you have the color values, open the form in the editor and go to **Form colors**. Paste the HEX values into the corresponding fields (background, button, text, border, etc.). The preview updates immediately so you can compare it against your site.

<Tip>
  Sample a handful of colors from your site at once — primary background, accent, button color, body text color, and border color. That covers almost every field in the form's color settings.
</Tip>

## Use your website's font

To make the form's text match your site, copy the exact `font-family` value from your website and paste it into the form's font settings.

<Steps>
  <Step title="Inspect a text element on your website">
    Right-click a text block on your website and choose **Inspect** (in Safari, choose **Inspect Element**). The browser developer tools will open with that element selected.
  </Step>

  <Step title="Find the font-family value">
    In the **Styles** panel, locate the `font-family` property for the element. Copy the entire value, including every fallback font and any quotation marks.

    For example: `"Helvetica Neue", Helvetica, Arial, sans-serif`
  </Step>

  <Step title="Open the form in the editor">
    Go to the form you want to update and click **Edit**.
  </Step>

  <Step title="Enable custom fonts">
    In **Fonts: general settings**, turn on **Use custom font**.
  </Step>

  <Step title="Paste the font-family value">
    Paste the value you copied into the custom font field and save.
  </Step>
</Steps>

<Note>
  The custom font may not render correctly inside the Maestra editor preview — the editor doesn't always have access to fonts hosted on your domain. To see the real result, open the form's test link on your website. The font will render correctly there because the browser pulls it from the same source your site does.
</Note>

<Warning>
  If your font is loaded from a private CDN or requires authentication, it may not load on the form even though the `font-family` value is correct. In that case, host the font in a publicly accessible location or use a Google Fonts equivalent as a fallback.
</Warning>