CODEWITHSUNDEEP
javascripthtmljquerycssemail-templates
vishnu
vishnu

Reputation: 2948

Is there any new methods to add custom font-family in Email Template?

I am struggling to add a custom font-family in my email template.

Tried the method below:

<!--[if mso]>
<style type=”text/css”>
@@font-face {
            font-family: 'CustomFont';
            font-style: normal;
            font-weight: normal;
            src: local('CustomFont'), url(myfonturl.woff2) format('woff2');
            unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
            mso-font-alt: 'CustomFont';
        }
</style>
<![endif]-->

(from: https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/)

But nothing works :(

Is anyone know how can I fix this issue?

Can we use any third-party JavaScipt or something else?

Upvotes: 0

Views: 4515

Answers (2)

Ketan Vekariya
Ketan Vekariya

Reputation: 352

in your HTML template, you’d put that into a block in the , as well as set the font-family:

While web fonts don’t have universal support, here are the email clients where they are supported:

AOL Mail
Native Android mail app (not Gmail app)
Apple Mail
iOS Mail
Outlook 2000
Outlook.com app


<style type="text/css">
@media screen {
  @font-face {
    font-family: 'CustomFont';
    font-style: normal;
    font-weight: 400;
    src: local('CustomFont Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }

  ...

  body {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  }
</style>

Upvotes: 0

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

We've been working with custom fonts in mail since 2018. No JavaScript of course because that doesn't render in mail clients or gets blocked for online mail clients.

The idea starts similar with yours, based on the Litmus guidelines. First we set a fallback font to "Helvetica, sans-serif". Then we allow our client to setup a "web font link" from within the CMS wich points to a style sheet like https://fonts.googleapis.com/css?family=Montserrat:300,500.

Next, our main custom font, is a hardcoded style tag using the OpenType Font format (*.otf) for which we then really don't care which browsers or mail clients support this.

@*  Web Font / @@font-face : BEGIN *@
@*  NOTE: If web fonts are not required, you can safely remove "Web Font" integration. *@
@*  Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. *@
@*  more info: https://litmus.com/blog/the-ultimate-guide-to-web-fonts *@
<!--[if mso]>
    <style>
        * {
            font-family: Helvetica, sans-serif !important;
        }
    </style>
<![endif]-->
@* All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ *@
@{
    var emailId = "{2175D0E9-F73F-4BC9-8A6E-E55F13BE02A5}";
    var emailItem = Sitecore.Context.Database.GetItem(emailId);
    var baseUrl = string.Empty;
    if (emailItem != null)
    {
        baseUrl = emailItem["Base URL"];
    }
}
@if (Model.GeneralSettings != null && !string.IsNullOrEmpty(Model.GeneralSettings["Web Font Link"]))
{
    var webFontLink = Model.GeneralSettings["Web Font Link"];
    @Html.Raw("<!--[if !mso]><!-->")
    <link href="@webFontLink" rel="stylesheet">
    @Html.Raw("<!--<![endif]-->")
}

@*
    Additonal custom fonts
    What it does: host our own custom font variants
    more info:  https://msol.io/blog/tech/host-your-own-web-fonts/
                https://knowledge.hubspot.com/articles/kcs_article/email/can-i-use-custom-fonts-in-my-email
*@
<style>
    @@font-face {
        font-family: 'DINCond';
        font-style: normal;
        font-weight: 300;
        src: url(@baseUrl/Design/fonts/mail/din-condensed/DINCond-Light.otf);
    }

    @@font-face {
        font-family: 'DINCond';
        font-style: normal;
        font-weight: 400;
        src: url(@baseUrl/Design/fonts/mail/din-condensed/DINCond-Regular.otf);
    }

    @@font-face {
        font-family: 'DINCond';
        font-style: normal;
        font-weight: 500;
        src: url(@baseUrl/Design/fonts/mail/din-condensed/DINCond-Medium.otf);
    }

    @@font-face {
        font-family: 'DINPro';
        font-style: normal;
        font-weight: 300;
        src: url(@baseUrl/Design/fonts/mail/din-pro/DINPro-Light.otf);
    }

    @@font-face {
        font-family: 'DINPro';
        font-style: normal;
        font-weight: 400;
        src: url(@baseUrl/Design/fonts/mail/din-pro/DINPro-Regular.otf);
    }

    @@font-face {
        font-family: 'DINPro';
        font-style: normal;
        font-weight: 500;
        src: url(@baseUrl/Design/fonts/mail/din-pro/DINPro-Medium.otf);
    }

    @@font-face {
        font-family: 'DINPro';
        font-style: normal;
        font-weight: 700;
        src: url(@baseUrl/Design/fonts/mail/din-pro/DINPro-Bold.otf);
    }

    .din-cond-300 { font-family: 'DINCond', Helvetica, sans-serif; font-weight: 300; }
    .din-cond-400 { font-family: 'DINCond', Helvetica, sans-serif; font-weight: 400; }
    .din-cond-500 { font-family: 'DINCond', Helvetica, sans-serif; font-weight: 500; }
    .din-pro-300 { font-family: 'DINPro', Helvetica, sans-serif; font-weight: 300; }
    .din-pro-400 { font-family: 'DINPro', Helvetica, sans-serif; font-weight: 400; }
    .din-pro-500 { font-family: 'DINPro', Helvetica, sans-serif; font-weight: 500; }
    .din-pro-700 { font-family: 'DINPro', Helvetica, sans-serif; font-weight: 700; }
</style>
@* Web Font / @@font-face : END *@

So my suggestion, try *.otf font files instead of woff2. And make sure you're hosting your own fonts or throughout a CDN like googlefonts.

Upvotes: 1

Related Questions