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:

  • 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.

Go to Messages in the eSputnik system

2. Click Additional settings > My Fonts.

Go to Additional settings in the eSputnik system

3. Click Add font.

Add a font in the eSputnik builder

4. Enter the font data:

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

All fields must be filled.

Fields for filling

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.

Select the font family

Important!

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.

Select the font style in Google fonts

Important!

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.

You can select one style only

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)

Copy the href value

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

insert in  URL with CSS file

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

Enter the font name

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

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

Copy the family name

and insert it in the Family field.

Insert in the Family field

Important!

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.

Confirmation pop-up

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 eSputnik 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.

Webfont generator

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

Downloaded file

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:

Specify the URL

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

New font added to My fonts

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

Added fonts list in the eSputnik system

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.

Newsletter with custom fonts

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.

Any Questions?
We’re always happy to help!
Request a Callback
Fill in the form, and our specialists will call you back as soon as possible.
Request a Callback
Chat Support
We’re waiting for your questions!
Send a Chat Message
Email
Contact the eSputnik support team
Send an Email