Adding a Custom Font

A web font is an effective way to create an original style for your templates. In the email builder, you can add a custom font from Google Fonts or another source.

Email clients that support custom fonts:

• iOS Mail and Apple Mail;
• Outlook 2016 and Outlook 2011 for Mac;
• Android App and Android Mail 2.3, 4.2, 4.4;
• Lotus Notes 8.

Email clients that replace custom fonts with standard:

• Gmail;
• Outlook.com (older than 2013);
• Yahoo!;
• IBM Notes 9 and Lotus Notes 7, 8.5;
• AOL;
• Blackberry;
• Alto;
• Thunderbird.

1. Go to Messages > Messages. Click any of your messages or create a new one.

2. Click Additional settings > My Fonts.

3. Click Add font.

4. Enter the font data:

• name;
• URL with a CSS file;
• family.

All fields must be filled.

5. Click Done.

How to Add a Font from Google Fonts

1. Go to Google Fonts.

2. Select the font and click "+" in the top right corner of the font family.

3. In the bottom right corner of the screen, open the selection drawer with the font parameters. In Customize, select the font style.

4. Once the style is selected, upload it to the builder. In Embed, copy the href value (for example, https://fonts.googleapis.com/css?family=Spartan&display=swap)

and insert it in the URL with CSS file field in the builder.

Enter the font name to easily find the font in the general list:

5. Copy the family name from the Specify in CSS block in one of the formats:

• Spartan;
• 'Spartan';
• 'Spartan', sans-serif;
• 'Spartan', sans-serif;.

and insert it in the Family field.

6. Click Done to save the settings. You will see a confirmation pop-up in which you can edit the font or add a new one.

7. Click Restart now. After the restart, the font will get available in the general font list in My fonts.

How to Add Your Own Font

To upload your own font, you need to add to the editor the link to the .css file. If you already have the link, go to step #5, if not, get started with the fisrt step.

1. Add to fontsquirrel the font file in the .ttf format.

2. Download your kit that would contain the file stylesheet.css.

3. Add to the file src to your server with the necessary font in the format woff2 (the script in this format would be in the kit), for example:

@font-face {
font-family: 'Spartan';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 

4. Upload the file stylesheet.css to your server.

5. While adding the font to the editor, specify the file URL and family name, for example:

Go to My Fonts to edit or delete your fonts or add a new one.

All added fonts are available in the email builder and can be used to create customized email design.

The procedure for adding fonts from other sources is the same; the only differences may be in the interface outlook.

Important Notes

1. If the font isn’t displayed in the email, check whether the device you’re using for preview supports custom fonts. Custom fonts that aren’t supported by the current email client are replaced by standard fonts.

2. Some fonts are only supported for languages that use the Latin alphabet and can’t be used for languages that use the Cyrillic alphabet.

3. The custom font is only applied to the email body: text copy, headings, subheadings, links. The email subject line and preheader will be displayed in a standard font determined by the email client.

4. For a proper display, do not use different fonts and different sizes of one font within one design layout structure.

5. When using a custom font, think how it would look in email clients that don't support it. The text with the replaced standard font may get bigger in size which may distort the layout. To avoid it, test the email, configure an alternative family, size and spacing for a correct display.