Changing your email template content fonts Follow

Disclaimer: Zendesk provides this article for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. Please post any issue in the comments section below or search for a solution online.

The custom fonts that you choose are as much of a fashion statement as the clothes you wear. They can be edgy and inspiring, cool and calm, or even over the top goofy * cough * comic sans * cough *. In the end however, the font you choose defines you and illustrates the point that you're trying to get across. Well, with this nifty tip of the week we can work on altering the fonts in your email template so that your sent messages can go from this:

Screen_Shot_2014-07-28_at_8.34.38_AM.png

( Fig 1: boring old font)


To this:

Screen_Shot_2014-07-28_at_8.32.51_AM.png

(Fig 2: some pretty neat font)

To achieve this goal, you'll want to edit the content placeholder that resides inside of the email HTML template to locate the default styles and rewrite them. To do this, we'll want to replace the current {{content}} placeholder with the a variation of the following template.

{% if content contains "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;" %}

{{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}

{% else %}
{{content}}
{% endif %}

A little info on this template:

  • The statement runs I F the default content contains Lucida Sans Unicode, Lucida Grande and etc.
  • When it runs, it will fire off the font-family replacement, font-size replacement, and color replacement.
  • If it does not run it will skip to ELSE at which point it will simply send off the default {{content}}.
  • The if statement must be exactly true for it to fire.
  • For the replacement process you must fill in the default style followed by the desired style (e.g. replace: "color:default;", "color:desired;").

To replace the default, we need to first locate the default of the {{content}} placeholder. The easiest way to do so is to send a test email to yourself. I use Gmail in this example so if you have a Gmail account it may be easier to follow along with that.

Note : Default content is not necessarily the default that is visible in the email HTML template.

To locate and replace the {{content}} placeholder

  1. Create a test ticket that you can respond to. Respond to the test ticket which will activate the trigger to "Notify requester of comment update." Your Gmail account should receive an email from your Zendesk Support isntance.
  2. In your email application, locate the ability to "Show original." The Gmail setting for this is shown here:

    Show_Original.png
  3. In the original text, locate the styling text that Zendesk Support used as the default for {{content}}. This can be a little bit of a safari but it can be found by searching for a keyword or phrase you used in your ticket response as seen in the image below.

    Defaults.png
    The phrase that I have searched for is in yellow, the default style is highlighted in green.
  4. Now that we have our default content styles we can replace the content in the email HTML template with our own. Locate the content markup in the HTML template and paste the new content template in place of the original content. It should look fairly similar to the attached screenshot.

    Screen_Shot_2014-07-28_at_7.58.06_AM.png

    This is the picky part. Keeping the format in mind ( replace: "color:default;", "color:desired;") we now have to replace the default styles with our desired styles. At this point it helps to copy and paste the information we located in step number 3 into the default positions of step number 4. For my example, I would make sure that the font default contains "Lucida Sans Unicode, Lucida Grande, Tahoma, Verdana, sans-serif"  and replace it with my desired font style. Let's take a closer look at the template here:

    This replaces my current font with some hip Helvetica:

    | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;"

    This makes my font size quite readable:

    | replace: "font-size: 14px;", "font-size: 30px;"

    This changes the font color to a nice earthy brown:

    | replace: "color:#2b2e2f;", "color:#333300;"

    All together it builds this:

    {{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}

    And this is my entire statement that will bring about these changes.

    {% if content contains "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;" %}

    {{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}

    {% else %}
    {{content}}
    {% endif %}

    After replacing my content placeholder with this, my emails will no longer have the Zendesk Support default email template, but rather my own custom font, color, and size. We now have full control over our email template and how our messages look! Remember that with great power comes great responsibility, so I don't want to see too many emails with Papyrus font running around.

Have more questions? Submit a request

Comments

  • 0

    one of the fonts I want to change is:

    font-family:"Lucida Sans Unicode",sans-serif;

    but im strugling to do it because it uses a double quote "

    what ive currently got is: {{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family 'Muli','Helvetica Neue',Helvetica,sans-serif;" | replace: "font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans',Verdana,Tahoma,sans-serif;", "font-family 'Muli','Helvetica Neue',Helvetica,sans-serif;" | replace: "font-family:"Lucida Sans Unicode",sans-serif;", "font-family 'Muli','Helvetica Neue',Helvetica,sans-serif;}}

    but it causes a liquid error because of the quote on the last lucida to be replaced, any suggestions?

  • 0

    Hey James,

    Try enclosing the faulty part of your code in single-quotation marks (' '). Here is the resulting snippet:

    {{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family 'Muli','Helvetica Neue',Helvetica,sans-serif;" | replace: "font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans',Verdana,Tahoma,sans-serif;", "font-family 'Muli','Helvetica Neue',Helvetica,sans-serif;" | replace: 'font-family:"Lucida Sans Unicode",sans-serif;', "font-family 'Muli','Helvetica Neue',Helvetica,sans-serif;}}

    Hope that helps!

  • 0

    Im having some real trouble setting the fonts in my email template, the font we are trying to use is a Google Font, if I open a ticket with ZenDesk is there someone watching this article at ZenDesk thats good with this kind of thing to try and help me out?

  • 0

    Tip: The replace function is white-space sensitive. So when it's not working as supposed, start small and try adding or removing spaces in the search text.

    Working example for our case:
    {{content | replace: "'Lucida Sans Unicode'", "Arial, Helvetica, sans-serif" | replace: "font-size: 14px;", "font-size: 12px;"}}

    @JamesQ, I would suggest you add the link to the Google Font in the html head (Channels, email, HTML-template), and use the replace functionality to change all to your font. Make sure you use a fallback alternative, since not all clients accept webfonts.

  • 0

    Thanks for sharing your expertise, Mark!

  • 0

    What if I just want to change the headings within content?

    I'm modifying the template for emails generated from Knowledge Base articles. I'd like to add some formatting to the "Large" and "Huge" text, but I'm hitting a wall.

  • 0
    Can this be used to change a placeholder within a trigger?
  • 0

    Has anyone found a way of modifying the {{ticket.comments.formatted}} place holder to remove the avatars?

    I know I can use Liquid markup and just use unformatted comments but if I do that then any comments that I want to preserve with some level of formatting (such as bold type, italics etc).

    I can't seem to figure out a way of doing it...

     

  • 0

    Hi John!

    I believe I have a solution for you on this that would avoid needing to use liquid to modify the placeholder.

    If you were to go to Admin > Channels > Email and scroll down to just above the email template you should see an option called "Show user profile photos in email." If you turn that off, the avatars in the emails from your Zendesk should be removed.

    Let us know if that helps or if you were meaning something else.

  • 1

    Hi

    Please explain me why code like this: {{ticket.comments_formatted | replace: "#c5c5c5", "red"}} besides proper change "#c5c5c5" => "red" replaces also html tags < and > to htmlentites like &gt; and &lt;?

    It couses that HTML in email client is not proper processed.

    Edited by Marcin Szajda
  • 0

    Hi Marcin,

    The code in the above article is Liquid Markup and is resolved within Zendesk, rather than your email client. Your email client wouldn't know what to do with elements like {{content}}. However after the code resolves, that's when it replaces elements in the HTML, which should look normal after the liquid markup has successfully resolved and the notification has been sent from Zendesk.

    Cheers,

    Ben Goff

  • 0

    @Benjamin: I know, that Liquid Markup is resolved in Zendesk. My problem is that Liquid Markup in email template is not proper resolved in Zendesk.

    Zendesk during resolving it change < and > to htmlentites like &gt; and &lt; and it is the cause that later email client can't read HTML becouse Zendesk break it.

    I ask why again why proper code of Liquid Markup like this: {{ticket.comments_formatted | replace: "#c5c5c5", "red"}} replaces also html tags < and > to htmlentites like &gt; and &lt;?

  • 0

    Hi Marcin,

    Thanks for helping to clarify that for me. I did some looking around and this appears to be a consequence of how we render our email notifications. We have another article that deals with the same issue here: https://support.zendesk.com/hc/en-us/articles/203661206-Using-Liquid-markup-to-reveal-CCs-in-a-notification-email

    And the solution presented in that article is to add some additional liquid markup to replace those HTML entities with their actual character equivalents.

    Cheers,
    Ben Goff

  • 0

    Unfortunately it does not work neither

    {{ ticket.comments_formatted | strip_newlines | replace:'&quot;','"' | replace:'&lt;','<' | replace:'&gt;','>' }}

    nor

    {{ticket.comments_formatted | strip_newlines | replace:'&quot','"' | replace:'&lt','<' | replace:'&gt','>' | replace:';','' }}

    but maybe the problem is somewhere else.

    Anyway I solve this problem by using {% for comment in ticket.comments %} loop and render html structure by myself.

Please sign in to leave a comment.

Powered by Zendesk