How to embed a font inside an html email

user_8416979 0
Viewed 3067

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.

font-face html-email embedding mime
1 Answers

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.

user_7344870
Related