Custom font in emal distribution | XM Community
Skip to main content

Hi! I want to use a custom font in emails.

I know that I can add @font-face css to myemail message by putting it in a style tag.

Whether it works on not depends on the email client the person is using.

Sadly, it does not seem to work for Outlook. 

Is there any way to make it work?

This is what I have now:

<style>
@font-face {
  font-family: 'FontName';
  src: url("linktofont") format("woff2");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'FontName';
  src: url("linktofont") format("woff2");
  font-style: bold;
  font-weight: 700;
}

* {
  font-family: FontName, Helvetica, sans-serif;
}
</style>

 

Try testing it using Gmail or Yahoo!

We solved it. It involves adding a CSS style block containing various styles and rules for email clients and mobile devices:

<style type="text/css">/* CLIENT-SPECIFIC STYLES */
                    body, table, td, a {
                        -webkit-text-size-adjust: 100%;
                        -ms-text-size-adjust: 100%;
                    }

                    table, td {
                        mso-table-lspace: 0pt;
                        mso-table-rspace: 0pt;
                    }

                    img {
                        -ms-interpolation-mode: bicubic;
                    }

                    /* RESET STYLES */
                    img {
                        border: 0;
                        height: auto;
                        line-height: 100%;
                        outline: none;
                        text-decoration: none;
                    }

                    table {
                        border-collapse: collapse !important;
                    }

                    body {
                        height: 100% !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        width: 100% !important;
                    }

                    /* iOS BLUE LINKS */
                    aax-apple-data-detectors] {
                        color: inherit !important;
                        text-decoration: none !important;
                        font-size: inherit !important;
                        font-family: inherit !important;
                        font-weight: inherit !important;
                        line-height: inherit !important;
                    }

                    /* MOBILE STYLES */
                    @media screen and (max-width: 600px) {
                        h1 {
                            font-size: 32px !important;
                            line-height: 32px !important;
                        }
                    }

                    /* ANDROID CENTER FIX */
                    divvstyle*="margin: 16px 0;"] {
                        margin: 0 !important;
                    }
</style>

 

This is probably not helpful to you, but I’ve found that the Outlook Desktop client doesn’t handle fonts very well. 

When we’re designing emails, we add code to ignore our custom font for Outlook and just use widely available alternates instead.

<style>
body{
		background: #ffffff;
		font-family: 'Inspire', Arial, Segoe, 'Segoe UI', Helvetica, sans-serif;
		font-size: 1em;
		width: 100%;
   }
</style>
<body>
<!-->if mso]>
<style type="text/css" media="all">
body, table, td {font-family: Arial, Segoe, 'Segoe UI', Helvetica, sans-serif; !important;}
table, tr, td {border-collapse: collapse !important;}
tr { line-height: 0px; border-collapse: collapse !important;}
</style>
<! endif]-->

etc...
</body>

 

Leave a Reply


Terms & Conditions