Changing your email template content fonts Follow

Comments

23 comments

  • Avatar
    James Q

    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?

  • Avatar
    Sam Michaels

    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!

  • Avatar
    James Q

    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?

  • Avatar
    Mark Roeling

    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.

  • Avatar
    Jessie Schutz

    Thanks for sharing your expertise, Mark!

  • Avatar
    Paul LaBarbera

    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.

  • Avatar
    Rosie
    Can this be used to change a placeholder within a trigger?
  • Avatar
    John Higgins

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

     

  • Avatar
    Christopher McLoughlin

    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.

  • Avatar
    Marcin Szajda (Edited )

    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.

  • Avatar
    Benjamin Goff

    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

  • Avatar
    Marcin Szajda

    @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;?

  • Avatar
    Benjamin Goff

    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

  • Avatar
    Marcin Szajda

    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.

  • Avatar
    Justin Smith

    Hello - I have two questions:

     

    1. Can I change the font to Open Sans?

    2. Is it possible to change the font type for email trigger content? Not necessarily just the font used for our responses within a ticket.

  • Avatar
    Michel

    Hello Justin, 

    Since this is not a supported feature, what I will say is not to take for granted. But I would say that there would not be a font restriction to the CSS code. 

     

    These changes would be made on your Custom HTML form. This means that every ticket update and send out would have this font present on the response.

     

    I hope this makes sense to you, feel free to contact us at support@zendesk.com if you have a specific question about your account.

     

    Cheers, 

     

  • Avatar
    Travis Fishbein

    Can you use this liquid markup method to target and change the {{footer}} placeholder in the email template as well? I'd like to change the default font of the agent-facing information that is generated on email notifications (the list of Ticket, Status, Requester, CCs, Group, Assignee, Priority, Type, and Channel).

    Cheers,

  • Avatar
    Daniel Yousaf

    Hi Travis!

    It should be possible to target that {{footer}} placeholder with the method described above.  That said, this custom solution isn't supported by Zendesk, so we can't guarantee it's functionality in specific use cases.  

    So I would advise testing this out!  Feel free to submit a ticket to Zendesk Support if you're encountering issues.  While we don't support this liquid markup, we're always happy to see if we can help! 

    Best

  • Avatar
    James Wilson (Edited )

    Thanks to the OP. This is an excellent tip.   I have a small contribution to add because I found that the Zendesk styles use no less than three different unique font-family strings for the Lucida font, and because the chain on my replacements was getting way too long.  And also because I wanted to specifically target all h1 through h5 to increase their sizes and change their fonts to something else beside my normal body font.   

    Here is my code snippet.  I hope someone finds it useful.  For my body, I'm using Open Sans.  For headings, Oswald (a condensed font). I've included @font-face declarations for both Open Sans and Oswald in the <head> of my template (not included here).

     

    {% comment %}
    Replace Zendesk fonts and colors with our design using this technique
    https://support.zendesk.com/hc/en-us/articles/203661386
    {% endcomment %}

    {% assign lucida1 = "'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;" %}
    {% assign lucida2 = "'Lucida Sans Unicode', 'Lucida Grande', 'tahoma', Verdana, sans-serif;" %}
    {% assign lucida3 = "'Lucida Grande','Lucida Sans Unicode','Lucida Sans',Verdana,Tahoma,sans-serif;" %}
    {% assign open_sans = "'Open Sans', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;" %}
    {% assign oswald = "Oswald, HelveticaNeueCondensed, HelveticaNeue-Condensed, 'Helvetica Neue Condensed', TeXGyreHerosCnRegular, TeXGyreHerosCn-Regular, 'Arial Narrow', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;" %}

    {% assign old_h1 = "font-size: 22px; font-weight: bold; line-height: 28px;" %}
    {% assign old_h2 = "font-size: 20px; font-weight: bold; line-height: 26px;" %}
    {% assign old_h3 = "font-size: 18px; font-weight: bold; line-height: 24px;" %}
    {% assign old_h4 = "font-size: 16px; font-weight: bold; line-height: 20px;" %}
    {% assign old_h5 = "font-size: 15px; font-weight: bold; line-height: 19px;" %}

    {% assign new_h1 = "font-size: 26px; font-weight: normal; line-height: 32px; font-family: " | append: oswald %}
    {% assign new_h2 = "font-size: 24px; font-weight: normal; line-height: 28px; font-family: " | append: oswald %}
    {% assign new_h3 = "font-size: 22px; font-weight: normal; line-height: 26px; font-family: " | append: oswald %}
    {% assign new_h4 = "font-size: 20px; font-weight: normal; line-height: 24px; font-family: " | append: oswald %}
    {% assign new_h5 = "font-size: 18px; font-weight: normal; line-height: 23px; font-family: " | append: oswald %}

    {{content | replace: lucida1, open_sans | replace: lucida2, open_sans | replace: lucida3, open_sans | replace: "font-size: 14px;", "font-size: 15px;" | replace: "#2b2e2f", "#4a4a4a" | replace: "color: #333;", "color: #000000;" | replace: old_h1, new_h1 | replace: old_h2, new_h2 | replace: old_h3, new_h3 | replace: old_h4, new_h4 | replace: old_h5, new_h5 }}

    {% if false %}
    {% comment %}
    The following line is required to allow us to save the template through
    the Zendesk UI, which checks for the presense of "content"
    {% endcomment %}
    {{content}}
    {% endif %}

  • Avatar
    Tomas Van Look

    Hi, could somebody assist? I tried applying this to the new _rich comment placeholder, but unfortunately this code:

    {% for comment in ticket.comments limit:1 offset:0 %}{{comment.value_rich | replace: "font-family:'Lucida Sans Unicode','Lucida Grande','Tahoma',Verdana,sans-serif;font-size:14px", "font-family:'Arial','Helvetica',sans-serif;font-size:12px"}}

    ends up like this:

    What am I doing wrong? ;)

  • Avatar
    James Wilson (Edited )

    @Tomas Van Look,  Well, for one, you're missing a space between font-family:  and 'Lucida Sans Unicode'.   based on your screenshot, the string to replace has lots more spaces.  Maybe start with this:

    {% for comment in ticket.comments limit:1 offset:0 %}{{comment.value_rich | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif; font-size: 14px", "font-family: 'Arial', 'Helvetica', sans-serif; font-size: 12px"}}

    However, I recommend you see my comment above where there are no less than three variants of the font-family string that need to be dealt with in order to change the font consistently everywhere.

  • Avatar
    Tomas Van Look

    Hi James

     


    I tried your suggestion (both from your last reaction as the ones with the variables). Unfortunately, I still get:

  • Avatar
    James Wilson

    Afaict the font-size: 12px is causing the mis-match.   Please take care with your coding.   Also, I have no idea why the email is producing visble HTML tags in the email.  I recommend simplifying your test, remove the replace stuff, and see if it still does that.  And if so, open up a separate issue -- because that is totally unrelated to this forum post.

Please sign in to leave a comment.

Powered by Zendesk