Colors & Fonts

User Icon > Settings > Brand Tab > Colors & Fonts

The Colors & Fonts section of the Brand Tab allows you to manage the fonts and brand colors available across your Email and Landing Page editors. Fonts and colors configured here are also available in the Content Defaults color pickers and font pickers for quick access.

Navigating to Colors & Fonts

Once logged in, click the User Icon in the top-right corner and select Settings. On the Settings page, select the Brand tab. The Brand tab contains three sections:

• Colors & Fonts > manage your brand's font selections and color palette
• Content Defaults > configure default styling for content blocks in the editors
• AI Training Hub > provide brand context for AI-generated content

Select Colors & Fonts to access font and color management.

Preferred Fonts

The Preferred Fonts section allows you to:

• Limit fonts available in the Email Builder and Landing Page Builder to the fonts you regularly use.
• Declare additional custom web fonts to be used in your marketing material.

By default, the setting for Preferred Fonts is set to Use all Default Fonts. This means the full list of fonts below will be available in the editors:

• Arial
• Courier
• Georgia
• Helvetica Neue
• Lucida Sans
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• ヒラギノ角ゴ Pro W3 (Hiragino Kaku Gothic Pro W3)
• メイリオ (Meiryo)
• Bitter
• Droid Serif
• Lato
• Open Sans
• Roboto
• Source Sans Pro
• Montserrat
• Ubuntu

If you would like to limit this list or import other fonts from the web, change the selection in the dropdown to Use Preferred & Custom Fonts. Upon changing this selection, you can click the tiles for the fonts you plan to use in the editors. Additionally, clicking the Add Custom tile at the end of the list allows you to pull a public web font into Ascent360.

The selected fonts here will be the only fonts that appear in the Email and Landing Page editors. Emails or landing pages that are already saved with other fonts will be unaffected.

Adding a Custom Font

You may add custom web fonts by clicking the Add Custom tile at the end of the font list.

Name the font - This is the name that will be shown in the font dropdown in the editor. We recommend inputting the true font name, but you are free to name it something else. For example, you may choose to name it semantically to indicate usage (e.g., "Rubik - Body Font").

Provide a Font URL - Provide the URL of the font for Ascent360 to reference. The URL needs to point to a CSS file with @font-face properties (see examples below).

Choose available font weights - Designate the font weights that you want to be available for this font in the editor. By default, font weights 400 and 700 (normal and bold) are enabled and cannot be disabled. Font weight settings are available on the Title, Button, Paragraph, and List content blocks. You may rename the weights after enabling them (if you wish to name them semantically). If you enable weights other than 400 or 700, be sure that the link you provided contains @font-face properties with a configuration for these weights (this is usually something you configure before obtaining the link from Google Fonts or Font Library).

Declare a Fallback Font - Choose a font from the list of default fonts to serve as the fallback font in the event that the custom font is unavailable.

Declare a Fallback Font Family - Choose a font family from the list to serve as the secondary fallback in the event that neither the custom font nor the primary fallback font can be rendered.

Providing the Web Font URL

It is important to provide the right web font URL when adding a custom font. If the URL is wrong, Ascent360 will not be able to load your custom font. In order to be valid, the font URL must fulfill these criteria:

• The URL needs to point to a CSS file with @font-face properties.
• The CSS needs to be hosted over HTTPS.
• The CSS contains the font weights you intend to use.

To test this, enter your font URL into your browser — it should load a page with plain text (the CSS file for this font). Look for @font-face declarations that include the weights you need.

Example: https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap

Using Custom Font Weights

If you have added extra weights beyond regular and bold, the Title, Button, Paragraph, and List content blocks in the editor will contain the weights as named in Settings.

Where to Get Web Fonts

We recommend browsing for web fonts from the following libraries:

• Google Fonts
• Font Library

Here is an example for finding the URL for the Rubik font from Google Fonts (https://fonts.google.com/specimen/Rubik):

1. Click Get Font.
2. On the resulting page, click Get Embed Code.
3. On the resulting page, click the @Import option.
4. Copy the link contained in the URL parameter. Only the family URL parameter is needed, as shown highlighted below.

Brand Colors

The Brand Colors section allows you to define up to 10 hex colors for quick access within the Email Editor and Landing Page Builder.

You may type the color hex code directly or click the swatch to select from a color picker.

Colors designated here will be shown in any of the color pickers within the editors for quick access. They are also available as quick-select swatches in the Content Defaults color pickers, making it easy to apply your brand palette when configuring default block styling.

Relationship to Content Defaults

The Colors & Fonts and Content Defaults sections of the Brand tab work together:

• Brand colors defined here appear as swatches in Content Defaults color pickers.
• Custom fonts added here are available in Content Defaults font pickers.
• Font mode (all fonts vs. preferred fonts) controls which fonts appear in Content Defaults font pickers.
• Changes made in Colors & Fonts are reflected in the Content Defaults interface in real time, even before saving - so you can configure both sections in a single session and see the combined result in the Content Defaults live preview.

For more information on configuring default styling for content blocks, see the Content Defaults articles.