5

I need to embed a font file into an email message. I know it makes the email bigger, but I need it to be self-contained, meaning no links depending on an internet connection.

I have currently working embedding images using the cid method and it works fine. However, if I use the same mechanism on fonts, it doesn't work.

Namely:

@font-face
{
    font-family: Andale;
        src: url("cid:andale_location") format('woff2');
}

when I have somewhere into the MIME:

 Content-Type: font/woff2
 Content-Disposition: inline
 Content-Transfer-Encoding: base64
 Content-ID: <andale_location>

 d09GMgABAAAAAMEYAA4AAAABikAAAMC7AAE....

When I receive an email with that CSS (into the head section of the HTML), both gmail and outlook ignore the font-face part. I get a binary attachment into the email but no fonts whatsoever. Using the font-family "Andale" doesn't work at all.

Leandro
  • 195
  • 3
  • 11

1 Answers1

2

Unfortunately we can't embed vector graphics (be it fonts or images) into email; email clients have very poor support for that. More info here: Base64 encoded image is not showing in gmail

However we can use @font-face to render web fonts in some email clients, but not all. Depending on what fonts you're designing with, you could specify a font-stack the starts with a custom font and falls back to similar system fonts. Something like:

font-family: Andale, Arial, sans-serif;

The email won't match pixel perfect in every email client, but maybe it doesn't have to? More info on email typography, web fonts, and fallbacks.

Ted Goas
  • 7,051
  • 1
  • 35
  • 42
  • Thank you for your reply. In fact, I need it to be pixel perfect. I am combining monospace with images in a fixed way and it's impossible without knowing in advance how wide would be a letter, at least without Javascript, and scripts are not allowed either in email messages. That's why I need to make sure I am using a font I already know. I cannot use webfonts because, as I said before, I have to make sure it works without an internet connection. Embedded images work fine, at least as far as I tested them. – Leandro Jun 20 '19 at 17:28