1. Documentation
  2. Working in Smart Builder
  3. Designing your Smart Builder Page

Managing Brand Fonts and Colors in Smart Builder

Follow
Avatar
Tas Kurtu
Last Updated

A big part of building customer trust involves how well you stay on-brand. With this feature, Smart Builder helps you keep your landing page on-brand by saving your brand colors and fonts.

Save your font styles and colors directly in Smart Builder and have them ready to update or use seamlessly. 

This article will explain how to add brand fonts and colors to Smart Builder. 

Add Brand Fonts to Smart Builder

You can select as many fonts as you like to add to your brand font library. 

  1. Log in to Unbounce and launch your page in Smart Builder.
  2. Navigate to the Style Guide style-guide-icon on the left-hand side menu.
  3. Select a text style (Headings, Button, Link, Paragraph, Form Field Label, Form Field Input, or Form Confirmation):
    Select a text style in Smart Builder.
  4. Click the Font Family drop-down menu, and click + Add Brand Font:
    Red arrow pointing to '+Add Brand Font' button
  5. The Manage Fonts window will appear in Smart Builder. Use the search bar to search for an available font.
    Search for font using search bar at top of Manage Fonts window

  6. Click the plus button next to the font to add it to your brand font library. 
  7. Click Save Fonts to finalize the changes:
    Gif demo of a user saving a font to the brand font library.
  8. To locate these fonts, click the drop-menu for any Font Family, and your Brand Fonts will be the first to appear in the list:
    List of brand fonts under the 'Font Family' drop-down menu within the Style Guide.

You're all set! Update fonts within your Style Guide to apply these styles across the entire page, or use the Design Settingspen-icon to apply the styles to individual elements only:
A gif demo of a user clicking the Design Settings within an element, and adding a brand font.

Remove a Font from the Brand Library

To remove a font from your brand library, navigate back to the Manage Fonts window (as mentioned in step 5 above) and click the remove button next to the font:
Red arrow pointing to the minue sign (-) next to a font.

Be sure to Save and Publish your page to finalize the changes.

Add Brand Colors to Smart Builder

You can select as many colors as you like to add to your brand library. 

  1. Log in to Unbounce and launch your page in Smart Builder.
  2. Navigate to the Style Guide style-guide-icon on the left-hand side menu.
  3. Navigate to any color picker within the Style Guide, such as Text Color, Background Color, Border Color:
    A gif demo pointing to the different color editing options in the Style Guide.
  4. From the Select Color picker, choose a color that adheres to your brand.
  5. Click the + Add Brand Color button to add it to your Brand Colors:
    A gif demo of a user saving the color to the brand library.

You're all set! Update colors within your Style Guide to apply these styles across the page, or the Design Settingspen-icon if you want to apply the colors to individual elements only:
A gif demo of a user clicking the Design Settings within an element, and adding a brand color.

Remove a Color from the Brand Library

To remove a color from the color library, navigate back to the Select Color picker, select the color at the top, and click the trash icon:
A gif demo of a user clicking a colo from the Brand Colors, then clicking the trash icon.

Be sure to Save and Publish your page to finalize the changes.

Related articles