Using Standard and Custom Brand Fonts

Owned by Andrew Wright
Jul 24, 2024
3 min read

Some standard fonts are always available in Landing Pages and Emails on the Symend Platform, but you probably want to use your brand font! You can make your brand font available on the Symend Platform using Custom Fonts.

  • Landing Pages offer full support for custom web fonts.

  • Email clients (Gmail, Outlook, Yahoo, etc.) offer only partial support for custom web fonts.

  • Text messages (via SMS) offer no support for specifying fonts (standard or custom), so the Symend Platform doesn’t offer font selection when creating content for Text messages.

Standard fonts

The standard fonts available to use are:

  1. Arial

  2. Courier New

  3. Georgia

  4. Helvetica

  5. Tahoma

  6. Times New Roman

  7. Trebuchet MS

  8. Verdana

These fonts were chosen because of their wide support across different operating systems and devices. This list is subject to change.

Custom Brand Fonts

If your Brand Guidelines specify the use of special or custom fonts on the web, follow these steps to enable the use of your brand fonts in the Symend Platform.

Add a font modal dialog with empty input fields
“Add a font” modal dialog

Adding a Custom Brand Font

Adding a Custom Brand Font

1

In the app, navigate to Content → Themes and Style → Brand fonts.

2

Choose “Add a font”.

3

In the “Add a font” modal dialog, you need to provide three (3) pieces of information:

  1. Font embed URL

  2. CSS font-family name

  3. CSS font-family fallback

4

Font embed url

Font embed URL is an externally hosted CSS file that includes the font and font properties that describe your brand font.

  1. Enter the full URL for the externally hosted CSS file.

This CSS file must be hosted on a publicly accessible server. (i.e. if you put the URL in the web browser, it’ll load the file without logging in.)
Symend does not support hosting this file.

Example:

This URL fetches “Roboto” font with weights of 300 and 400 from Google Fonts.

https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap
5

CSS font-family name

CSS font-family name is a unique, case-sensitive key that enables the Symend Platform can present your brand font in Landing Pages and Emails.

  1. Find the font-family in the CSS file from the previous step.

  2. Copy and paste it into the CSS font-family name.

The font-family described in that file must be exactly what is entered in the CSS font-family name field. Any typos or misspellings will break this functionality.

Example:

Continuing from the previous step, you would enter Roboto in this field, exactly as it’s presented in the CSS file.

  • Roboto

  • roboto

6

Css font-family fallback

CSS font-family fallback controls which font will be displayed if your Custom Brand Font cannot be rendered, for some reason.

  1. Select the preferred fallback font style (monospace, serif, sans serif).

 

  • monospace fonts use even sized letters. Think of a typewriter.

  • serif fonts have small strokes at the ends of larger strokes. Think of it as “feet” on the ends.

  • sans serif fonts don’t have small strokes at the ends of larger strokes. Think of it as “no feet” on the ends.

image-20240724-211542.png
7

Press “Save”.

8

Now, in Content Editors on Landing Pages and Emails, your custom font will be available in the Font selector.

 

Example using “Roboto” from Google Fonts: