How do I setup custom web fonts in my account?

What are custom web fonts?

There are web safe fonts and web fonts but what’s the difference? Web safe fonts are what you’re likely to be using in your emails right now. This includes fonts such as: Arial, Verdana, Georgia, Times New Roman, and Courier. These are the default fonts found on most operating systems and devices.

Web fonts, on the other hand, are fonts that are typically not found on 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.

Where can I find web fonts?

You can find supported web fonts anywhere. However, we recommend using Google Fonts as these are free to use in your emails. Google Fonts can be found here. 

Setup a web font

Step #1
Identify the custom web font you wish to use from your external source, like Google Fonts. The steps below are applicable to using a Google Font.

1. Go to https://fonts.google.com
2. Locate the Web Font tile, click on it
3. On the right, click '+ Select this style'
   
   
   
   
4. A menu will open on the right for the selected font family, click the 'Embed' tab
   
   
   
   
   
5. Copy the title of the Font Name, save this for use in later steps in your Delivra account.
   
   
   In this example, the Font Name would be Do Hyeon
   
   
6. Copy the Font URL, save this for use in later steps in your Delivra account.
   Tip: The link starts at https: and ends at the end of the bolded words of the Font Name, before the & symbol, seen below.
   
   In this example, the Font URL would be https://fonts.googleapis.com/css2?family=Do+Hyeon 
   
   
7.  Copy the Font Family, save this for use in later steps in your Delivra account. 
   Tip: You will need to copy everything after Font family excluding the quotation marks and last semicolon, seen below.
   
   
   In this example, the Font Family would be Do Hyeon, sans-serif

Step #2
Navigate to the Brand Styles page in your account.

1. Click on Settings > Account Management > Brand Styles
2. Locate the 'Brand Fonts' section

3. Retrieve the Font Name, Font URL, and Font Family saved from the previous steps. Paste each into the appropriate boxes.
4. Repeat steps if additional font setup is necessary.
5. Click Save.

Custom Web Fonts will appear in the font menu in the Drag and drop editor as a font choice, seen below.

Notes

1. Custom web fonts saved to your account will be available in our drag-and-drop editor only (including the drag-and-drop editor for forms, landing pages, snippets, etc.)
   
   
2. 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 selecting the X.