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 instance.
  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.

Powered by Zendesk