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:
( Fig 1: boring old font)
To this:
(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
- 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.
- In your email application, locate the ability to "Show original." The Gmail setting for this is shown here:
- 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.
The phrase that I have searched for is in yellow, the default style is highlighted in green. - 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.
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.
8 comments
Mai Dam
I'm to make our tickets look exactly like Gmail. Is this even possible? Please answer to mai@sparklegrillsacramento.com. Thank you!
0
Brett Bowser
Hey Mai,
You should be able to edit your email template to look however you'd like! To have your tickets look similar to email, I would follow these instructions: Setting up an unformatted email template
I hope this helps!
0
Jon Simone
Hello,
This solution appears to work for everything except for the user name, company name, date, and time.
Here is an example:
Is there any way to change the font for these?
Hopefully Zendesk will consider a wysiwyg tool in the future for seeing what the email template will look like in real time as this process is cumbersome.
Thanks as always!
Jon
2
Chris Broughton
I'm confused why changing the content font, that it ignores the name/date as well. It seems like it should be replacing anything thats in Lucida Grande, but it doesn't
1
Giuseppe
Hi Chris,
Based on my testing, this could be because the content placeholder mainly contains the ticket comments, as also defined in Understanding the system placeholders
A possible workaround here would be to utilize agent signatures instead. For example, with liquid formatting, you can format your emails such that only the actual comment is included (not the name of the agent and the date) similar to this article - Setting up an unformatted email template - then you can add the agent's name in their signatures, because agent signatures appear to also be in scope of this font changes.
0
Joanne Louzado
Hi.
1. it looks like the Show Original Email section is encoded so I can't see the HTML code which needs replacing
2. I want to change the default font to Verdana... so can I just remove Verdana from the initial IF statement and add it in the replacement section?
{% if content contains "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', sans-serif;" %}
{{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', sans-serif;", "font-family: Verdana, sans-serif;"
0
Joe Mackey
I'm not sure if this page needs an update or not, but none of this worked for me. I followed every step to the letter and nothing worked. I spent 4+ hours trying to figure it out, and ironically enough the solution was 100x simpler than this method and it took me literally less than 60 seconds!
After hours of trying, I tried one last thing.
I clicked the Revert to Default button (underneath the HTML Template box) and then where it says:
I deleted the following:
Then replaced it with the font I wanted:
Then I saved it. And that's what got the job done for me.
3
Mike DR
-1