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.
Setup a web font for your account(s)
Follow these steps to add web fonts to your account. These steps are applicable to Google Fonts.
Step #1 - Source the web font
Identify the web font you wish to use from an external source, like Google Fonts.
- Use search and/or filters to find your desired web font. Once found, click on the listing.
- On the next page, you will see a listing of all styles for the web font selected.
- Scroll through the web font styles and when you find one that you like, on the right, click the + icon. You can select more than one style.
- All selected styles will be added to the selected families clipboard, seen in the top-right corner of your page. The icon looks like a shopping bag.
- When you're finished selecting all desired font styles, open the selected families clipboard to access font information that you will need to save in Delivra.
- In the "CSS rules to specify families" box, copy the font name & save this for use in later steps.
- Next, in the "Use on the web" box, ensure that the "<link>" radio button is selected. Then, copy the font URL from the box. Save this link for use in later steps.
Tip: The link starts at https: and ends at the end of the bolded letters of the font name (before the & symbol), highlighted in the image.
- Lastly, in the "CSS rules to specify families" box, copy the font family & save this for use in later steps.
Tip: Copy everything after font family:, highlighted in the image.
Step #2 - Add web font to Delivra account settings
- Click on Settings & choose "Account Management" from the drop-down menu. Then, click on "Brand Styles".
- Find the "Brand Fonts" section. Then, retrieve the font name, font URL, and font family that you saved from earlier steps. 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.
- Optionally, choose to share the saved web fonts to other accounts that you manage using the drop-down menu on the right side of the page.
- Click the "Save" button.
Step #3 - Use your web fonts in email design
Your saved web fonts will appear in the font menu in all drag-and-drop designers as a font choice.
- 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.
- 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.