Custom font in emal distribution | XM Community
Skip to main content
Michael_Cooksey
Administrator
23 days ago
Solved

Custom font in emal distribution

JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12

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>

 

Best answer by JohannesCE

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 */
                    a[x-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 */
                    div[style*="margin: 16px 0;"] {
                        margin: 0 !important;
                    }
</style>

 

View original
PraDeepKotian_XM
Aanurag_QC
TusharDalwani
5 people like this
  • PraDeepKotian_XM
    PraDeepKotian_XM
  • Aanurag_QC
    Aanurag_QC
  • TusharDalwani
    TusharDalwani
  • JohannesCE
    JohannesCE
  • R
    Ridashaikh15

3 replies

TusharDalwani
QPN Level 6 ●●●●●●

Try testing it using Gmail or Yahoo!

~Tushar Dalwani
Ricmarug
O
JohannesCE
3 people like this
  • Ricmarug
    Ricmarug
  • O
    omkarkewat
  • JohannesCE
    JohannesCE
JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • JohannesCE
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • Answer
  • June 30, 2023

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 */
                    a[x-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 */
                    div[style*="margin: 16px 0;"] {
                        margin: 0 !important;
                    }
</style>

 

PraDeepKotian_XM
S
2 people like this
  • PraDeepKotian_XM
    PraDeepKotian_XM
  • S
    ScottG
Eric_A
Level 2 ●●
Forum|alt.badge.img+15
  • Eric_A
  • Level 2 ●●
  • 22 replies
  • August 3, 2023

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>

 

S
1 person likes this
  • S
    ScottG

Leave a Reply


Terms & Conditions