Email Font | Community
Skip to main content

Email Font

  • June 29, 2015
  • 9 replies
  • 0 views
P

Hello,

I have read various articles about how to customize the html template for email notifications, yet there is still something going on that is not right.  The default font according to the articles is similar to what is rendered on the web pages, however the default font that is in the emails sent from Zendesk is a very small times roman looking font.  After trying many times to change the html template, we can only get the text delimiter and this line to change to an arial looking font "

Your request (1) has been updated. To add additional comments, simply reply to this email."

The placeholders such as
{{ticket.latest_public_comment_formatted}}

remain in this small time roman looking font.

--- The objective is to simply have the emails look nice and have a single font style throughout the email.  Something that is not time roman-like.

What am I missing?

Thanks in advance,

Paul

    This topic has been closed for replies.

    9 replies

    P
    • PaulNeights
    • Author
    • June 29, 2015

    Buried in the comments I found a simple answer from DAVID.Thank you David !!!!!David 4 months ago

    Hello,

    An easier option to change the font for your email notifications is to add the following CSS rule between the <style> tags in your Email Template:

    p {
    font-family: 'helvetica', 'arial', serif !important;
    }

    Just change the fonts to what you prefer and save the changes.

    You won't need any liquid markup in the template, just the above CSS rule.

    J
    • Jessie17
    • July 1, 2015

    Hi Paul!

    Thanks so much for sharing what you were able to dig up! Can you tell me which articles you were looking at? I can get in touch with the authors to get the content updated to reflect this information.

    Thanks!

    P
    • PaulNeights
    • Author
    • July 1, 2015

    Here are the articles which do not have the font carried into the placeholders such as {{ticket.latest_public_comment_formatted}} :

    https://support.zendesk.com/hc/en-us/articles/203663236-Customizing-your-email-templates

    https://support.zendesk.com/hc/en-us/articles/203661386-Changing-your-email-template-content-fonts

    In the comments I noticed David's note:

    *David *February 18, 2015 18:41

    Hello,

    An easier option to change the font for your email notifications is to add the following CSS rule between the <style> tags in your Email Template:

    p {
    font-family: 'helvetica', 'arial', serif !important;
    }

    Just change the fonts to what you prefer and save the changes.

    You won't need any liquid markup in the template, just the above CSS rule.

     

    And also Jamie Davidson's note:

    *Jamie Davidson *February 23, 2015 04:14

    Hi All...

    It worked for me adding the below code to the inline CSS

    p {
    margin: 0px 0px !important;
    font-family: 'arial', 'sans-serif', serif !important;
    font-size:12px !important;
    }

    Thanks David,

    Jamie

     

    Jennifer16

    We're already on it. Thanks, Paul!

    P
    • PaulNeights
    • Author
    • July 1, 2015

    Hey Thanks so much Jessie and Jennifer !

    Hopefully this will be helpful to someone else going forward.  We are having good feedback on the Zendesk product overall, and just want to make sure the email notes look clean and professional so as to reflect positively on the Zendesk product and company.

    T
    • Tristan13
    • March 30, 2016

    This only works if sending to an email client that does not strip out the <head> css like Google Mail. Outlook it works fine. Not being able to simply edit the font on a template is ridiculous.

    T
    • Tristan13
    • March 30, 2016

    I think I have got to the bottom of this Jordan Wheelock's article https://support.zendesk.com/hc/en-us/articles/203661386-Changing-your-email-template-content-fonts only has replace for one of the two forms of style. I am not sure if Zendesk applied an additional slightly different style after the article was written or it was omitted. Both the following have to be replace:

    1. font-family: 'Lucida Grande','Lucida Sans Unicode','Lucida Sans',Verdana,Tahoma,sans-serif;
    2. font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;

    The difference? The fonts are listed in a different order and the first one has an additional style 'Lucida Sans' and has no spaces after the commas.

    Although it would not harm as a backup putting styles in the head.

    My final markup for font replacement (sans font-size adjustments):

    {% if content %}
     {{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: 'Segoe UI', Tahoma, 'Trebuchet MS', Arial, 'Helvetica Neue', Helvetica, sans-serif;" | replace: "font-family: 'Lucida Grande','Lucida Sans Unicode','Lucida Sans',Verdana,Tahoma,sans-serif;", "font-family: 'Segoe UI', Tahoma, 'Trebuchet MS', Arial, 'Helvetica Neue', Helvetica, sans-serif;"}}
     {% else %} 
     {{content}} 
     {% endif %}


    J
    • Jessie17
    • March 30, 2016

    Hi Tristan! Thanks for doing that detective work! I'm going to check with some folks to see if we can update Jordan's article. 

    T
    • Tristan13
    • March 30, 2016

    Hi Jessie,

    Thanks. I just noticed that Mark Roeling's commenton the page states the same info in a roundabout way.

    Cheers,

    Tristan

     

    Terms & ConditionsCookie settingsAccessibility statement