Adding Custom Fonts

Custom fonts let you create a unique style for your emails. You can add fonts from Google Fonts or upload your own and use them in the email editor .

Font Sets in eSputnik

eSputnik supports three font sets:

• Safe — system fonts supported by most email clients. Use these for reliable rendering.

• Web — web fonts supported by modern devices and browsers. Some email clients fall back to system fonts.

• Custom — user-added fonts. Commonly used in banners. Support in text blocks depends on the email client and often falls back to system fonts.

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.

Adding Your Font to eSputnik

1. Open an existing email or create a new one .

2. In the Email management panel, click Advanced settings → My fonts.

   

3. Click Add new font.

   

4. In the Add new font window, enter the font parameters (all required):

   • Font name
   • URL with CSS file
   • Family

   You can get font parameters in one of the following ways:

   • using the Google Fonts library (or another font library),
   • creating your font.

5. Click Add and confirm page restart.

After the restart, the font appears in the list. If you have unsaved changes, you can postpone the restart. Save the email and reopen it to make the font available.

Add a Font from Google Fonts

👍

Tip

Open two browser tabs: one with eSputnik and one with Google Fonts. This makes copying values easier.

1. Go to fonts.google.com .
2. Find a font using search or filters.

If you know the font's name, use the search or filter fonts by category, language, and properties (number of styles, thickness, angle, width, etc.). Also, you can sort fonts by trending, popularity, novelty, or name.

🚧

Important

Do not select multiple styles at once. Add each style separately (for example, Regular, then Bold). Each style is added as a separate font.

Example: add Quantico (Regular 400)

3. Open the font page and click the font field.

4. Click Get font.

5. Click Get embed code

6. In the styles list on the left:

• Leave only the Regular 400 toggle enabled.
• From the top menu, select the Web tab and choose the <link> integration method.
• Copy the value of the href attribute in the following format:
  https://fonts.googleapis.com/css2?family=Quantico\&display=swap" rel="stylesheet".

7. Switch to the eSputnik tab, go to My fonts, and click Add new font.

8. Paste the link into the URL with CSS file field.

9. In the Google Fonts tab, in the Quantico: CSS class section, copy the font family value in the following format:

"Quantico", sans-serif;

10. In the eSputnik tab, paste this value into the Family field and click Add.

❗️

Important

The value for Family must be copied directly from the fonts’ library. The font with a random name will be invalid.

11. Click Restart now.

Adding Your Own Font

Let's look at the Font Squirrel resource as an example.

To upload your font, you need to add the link to your server CSS file in the URL with CSS file field.

1. Go to fontsquirrel .

2. Accept the license terms.

3. Click UPLOAD FONTS to upload the font file in TTF format.

4. Click DOWNLOAD YOUR KIT and download the generated ZIP archive with the stylesheet.css file.

5. Add src to the file stylesheet.css 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: 'Manrope';
  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;
}

6. Upload the stylesheet.css file to the server.

7. In eSputnik tab, go to My fonts, and click Add new font.

8. Paste the Font name, URL with CSS file, and Family in the fields and click Add.

Use a Custom Font

1. Select the text in the block

2. Go to Styles, and open the Font Family drop-down menu.

3. Switch to the Custom tab and select the font.

The font is applied to the selected text.

Edit or Delete a Font

1. Open Advanced settings → My fonts.

2. Click:

• the Pencil icon to edit the font;
• the Trash icon to delete the font.

Custom Font Usage Details

1. If a font isn’t displayed in an email, check whether it’s available on the device where the email is opened. If the font isn’t available, the email client replaces it with a standard font.
2. Some fonts support only languages that use the Latin alphabet and can’t be used for languages that use the Cyrillic alphabet.
3. Do not use custom fonts for body text. Use them only in images — for example, in banners.
4. The email subject line and preheader are always displayed in a standard font defined by the email client.
5. When you use a custom font, consider how the email looks in clients that don’t support it. Fallback fonts may appear larger and break the layout. Always test the email and configure fallback font family, size, and spacing to ensure correct rendering.

Troubleshooting: Google Font Not Displaying

If a Web font (including Google Fonts) that used to render correctly suddenly shows as a fallback font:

• Gmail desktop is expected to ignore web fonts. Gmail (and most webmail clients) doesn't load external font files for security/performance reasons and always falls back to a system font — this is normal behavior, not a bug, and applies regardless of any recent changes on your side.
• Verify the fallback font family is set. Without an explicit fallback, unsupported clients may substitute a font with different metrics, which can shift spacing or size.
• Re-check the font link after any editor update. If the way custom fonts are linked (<link> vs. @import) changed after a platform update, an existing My fonts entry could stop resolving — open Advanced settings → My fonts and confirm the URL with CSS file still loads correctly, then re-add the font if needed.