Manage brand colors & custom web fonts

Manage brand colors & custom web fonts

Save colors & fonts to your account(s) so that users can easily access your brand styles when designing your emails. Brand colors & fonts configured to your account are available in any drag-and-drop designer in the system.

Add your brand colors

Tip: Open images in a new browser tab for a larger view.

1.  Navigate to Settings and select "Account".
2.  Click on "Brand Styles".
3. Click the "Add another color" button to add first brand color.
4.  Type or paste hexadecimal color code into the "Hex Color" box.

5.  Add a description for the color.

6.  Click the "Add another color" button to add more brand colors to your list.

7.  Click the "Save" button to save changes.


Additional color settings

Check the "Allow only Brand Colors in Drag-and-Drop Designers" to restrict the color picker to only show brand colors saved to your account(s).

 

Custom web fonts

What are custom web fonts?

There are two categories of web fonts: web safe fonts & custom web fonts. But, what’s the difference?

Web safe fonts are fonts such as Arial, Verdana, Georgia, Times New Roman, and Courier. These are the default fonts found on most operating systems and devices. Emails using web safe fonts are universally recognized & rendered on most devices.

Custom web fonts, on the other hand, are fonts that are typically not found across multiple operating systems and devices. They offer a great way to demonstrate your company's overall intent as they allow designers more creativity and flexibility. However, not all receiving systems can render them.

Where can I find web fonts?

We recommend using Google Fonts. Google offers a vast library of free fonts to use in your emails. You can browse Google Fonts here. 


Add your custom web fonts

There are two parts to this process; one external to source the font and one internal step to save the font to your account. Follow these steps outlined below to add web fonts to your account.
These steps are applicable to Google Fonts.

Part 1: Source the web font

Identify the web font you wish to use from an external source, like Google Fonts.

1. Go to https://fonts.google.com/ and use the search to find your desired web font. 

2. Click the "Get font" button on the top right corner.

3. On the next page, click the "Get embed code" button.

4. Left side of screen: select the font style to import.
In this example, Regular 400 has been selected.

5. Right side of screen: Find the "CSS class for a variable style" box. Copy the font family & save this for use in later steps. Do not include the semi-colon.
In this example, the font family would be "Lato", sans-serif highlighted in the image.

6. Right side of screen: Find the "Embed code in the <head>" box. Copy the font URL & save this link for use in later steps.

Tip: The link starts at https: and ends at the end of the font name (before the & symbol), highlighted in the image.



Part 2: Add web font to Delivra account settings

1. Navigate to Settings > click "Account", then click "Brand Styles".

2. Find the "Brand Fonts" section. Then, retrieve the font name, font URL, and font family that you saved from earlier steps.

3. Paste each into the appropriate boxes on-screen.
Click the "Add Web Font" button & repeat steps if you have additional font families to save to Delivra.

4. Click the "Save" button to save your changes. The Font Example should reflect the newly-added font's preview.


Web font notes

  1. Your saved web fonts will appear in the font menu in all drag-and-drop designers as a font choice.


  2. Web fonts saved to your account will be available in our drag-and-drop editors only, including editors for forms, landing pages, snippets, etc. These fonts cannot be applied to uploaded HTML files for email designs.

  3. In the Brand Styles page, Brand Colors are a required setting if you wish to edit Brand Styles. If no Brand Colors are chosen in the Brand Styles section, you will receive an error message upon saving the web font choices. Either save your brand colors now, or remove the brand colors by clicking the trash icon.

    • Related Articles

    • Manage general account settings

      General account settings apply to your entire account and these settings include your account's time zone, default segment selection for campaigns, a global reply-to setting for campaigns, and more. To get there, click the Settings icon in your ...

    • Manage your personal user settings

      You can manage user settings to control your personal preferences for which alerts you receive from the system, what shortcuts you see within the system, and more. To access your user settings, click on the user icon located in the top-right corner ...

    • Manage footers

      Footers are automatically appended to the bottom of each outgoing campaign. Their purpose is to identify the sender of the email and provide opt-out options. All accounts are created with a default footer that includes: Sender's company name Physical ...

    • Manage test recipient lists

      A test recipient list is a list of email addresses that you consistently send tests of email templates or campaigns to from the system. While you can manually add email addresses to send tests to, we recommend that you save the lists of email ...

    • Customize campaign click tracking and hosted content domains

      Improve subscriber trust and deliverability by customizing the domain used to track your email activity and content. Create up to four customizations to support forms, landing pages, click tracking and assets (online version and media files). What is ...