How to Add a Custom Font
A web font is an effective way to create an original style for your templates. In the eSputnik 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:
- Outlook.com (older than 2013);
- IBM Notes 9 and Lotus Notes 7, 8.5;
How to Add a Custom Font in the eSpuntik Email Builder
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:
- URL with a CSS file;
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.
You can add only one time at a time. For 2 or more custom fonts, add each new one separately, after the previous one has been successfully added.
3. In the bottom right corner of the screen, open the selection drawer with the font parameters. In Customize, select the font style.
You can select only one style. For 2 or more styles, add each new one separately, after the previous one has been successfully added, for example, first add regular, then medium, bold, etc. They will be added to the eSputnik builder as different fonts.
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 eSputnik 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', sans-serif;
- 'Spartan', sans-serif;.
and insert it in the Family field.
The value for Family must be copied directly from the corresponding field in Google Fonts. The font with a random name will be invalid.
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. Here, you can 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.
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.