Updated April 2017
Rebecca, a quick note about these requests: sometimes when creating a new email blast we want to add some color there, increase a font size here, throw in some BIG BOLD CAPS! with exclamations to grab people's attention, use another font color, and maybe even switch up the font family for a small note.
Overuse of styles and colors can be bad for email deliverability. It is one of the first things spam filters look for because shocking colors and fonts are commonly used by spam advertisers. Try to keep your email design to no more than 3 font styles and colors.
Simplicity is always best when it comes to email deliverability.
Adjusting individual font size and color with the WYSIWYG editor
If you want to change the size, color or font of your email blast, without editing the HTML, you can use the edit buttons displayed towards the left of the WYSIWYG editor.
Adjusting individual font size and color with HTML
If you want to change the size and color of a particular line of text, and it will be a one-off edit, you can use the <span> tag in the HTML box in your content editor.
for example:
< span style="font-size: 16pt; color: #FF0000;">Font size 16 px</span>
will render this:
Font size 16 px
Using different fonts in email blasts
The best way to customize the font in your email blasts is to edit your HTML template. Email templates work much like the website themes.
- You will first need to create a custom email template for the email blast, found in Theme > New custom theme.
- Once you've created a custom email theme, you will need to install the font you would like to use in your <header>. For example, this FAQ walks you through installing a Google Web Font on your website template's layout.html; you can apply the same logic to the HTML email template.
- Apply your font to your email. To apply it to the text entered in the content editor, you will want to look for the {{ body }} tag. Right before the tag you will see the styles associated with it. It will look something like this:
<td valign="top" style="font-size: 13px; color: #505050; font-family: YourCustomFont, Helvetica, Arial, sans-serif; line-height: 150%; text-align: left;">
{{ body }}
</td>
You can add your custom font in the styles for the locations where you'd like it applied.
Adjusting font, size, and color with CSS
If you want to make changes that affect the entire email blast body formating, you may be interested in using CSS to make those edits. You can place the particular styles into your email blast's HTML template by placing a <style></style> tag right before your closing </header> tag. It will look something like this:
<style type="text/css">
body, td, font { font-size: 10pt; font-color: #505050;}
#footer a { text-decoration: underline; color: #b68d6b; }
</style>
Be sure to test everything before sending out an email to your list, and always check the SpamAssasin score under the "Spam Score" tab. Read more about Email Best Practices here.
Showing 14 reactions
Sign in with
You could write a media query to make the font bigger on only email. So for instance, you could write a media query that targets mobile by editing the existing query on around line 24 in your email, which looks like this:
/* Give content more room on mobile */ @ media screen and (max-width:480px) { table[class="container"] { width:100%!important; } div[class="body-content"]img { width:100%; } }Then you’d want add in some styling for what size you want the font to be on mobile. You’ll want to target whatever HTML element’s font your looking to change, as well as include an !important attribute since this CSS will be at the top of your email and could be overrode by cascading style of CSS. Here’s what you’d need to put in to make your body font larger:
td { font-size: 36px !important; }Let me know if you have any additional questions!
Thanks!