This section covers all fonts usable in activity form text elements and email blasts.
Activity fonts
Use the following fonts for Activities in the Visual Editor:
|
|
|
If you want to use a font style that is not supported natively in Engage, such as a Google Font, you may add it through a custom CSS entry on your form. Here is a code example:
/* Used to import the font style EB+Garamond from google's font library */
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
/* Used to make the imported EB+Garamond font the default font-family the Engage activity */
body, p, h1, h2, h3, h4, ul, li, a, div, span, .sli-element {
font-family: 'EB+Garamond', serif !important;
}
NOTE: The below changes are only for Activity forms. Only use our list of email-safe fonts to avoid issues with emails correctly rendering across various email clients.
In the above CSS, replace the URL with whatever the URL is for your font style location. For example...
@import url('Font_URL_Here');
Use Google Fonts as a library for many different types of font styles. They have over 900 fonts available for free. It will also generate the @import statement for you:
- Go to https://fonts.google.com/
- Use the search tool to find the font you are looking for.
- Select the fonts you want to add to the "shopping cart".
- Copy the information from the shopping cart into the CSS file.
- When adding the font style after the "serif" or "sans-serif" indicator you will want to add "!important" before the semi-colon (see code example above).
NOTE: since you are applying the font via CSS, you will need to save and preview or publish the form to see the font.
If the font style is not included on fonts.google.com but housed on your website instead, you can point to your website.
NOTE: If directing to your website, security may block another site from using that font. You will need to allow Engage to access it. Your web developer will need to perform this update—our support staff does not have access to edit your website. The issue is that Cross-Origin resources are blocked. To resolve, edit the .htaccess file or httpd.conf file. You can find more details here.
Once the import statement is set up, replace the name of the font family: in the CSS block.
Email Fonts
Many popular email clients support viewing the web fonts listed below. However, Gmail's mobile app displays all emails with their "serif" or "sans-serif" fonts, with no exceptions; mobile devices have very few native fonts installed. Even if you pick one of the fonts below to design your email, Gmail will probably not display it.
Select from the following fonts in the Visual Editor for emails:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Lucida Console
- Lucida Grande
- Palatino Linotype
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana