CMS Development

LauraJJ
Member

Changing the font in the body of a template - CSS

Hi, 

 

I am currently using an email template and although I can manually change the font in the body of the email (chosen Arial) when I add a personlised token and send a test email to myself the font for this token is not Arial. 

 

I am presuming this is something in the CSS side (eg the set font type for the particular email template that I am using)

 

I have very little knowldge/experience of CSS, would someone be so kind as to tell me where in the CSS style needs changingto ensure all text within that email template (inlcuding tokens) is Arial. 

 

Thank you in advance. 

0 Upvotes
3 Replies 3
ipowell
Contributor

Changing the font in the body of a template - CSS

Hi Laura!

 

What I ended up doing for my email templates is adding some css in the head of the template.

This is where you can add in additional styles if you want.This is where you can add in additional styles if you want.

I don't know how familiar you are with html and css, but, what you can do is change the font for the body of the email template. 

  body {
      font-family: {{ primary_font }};
  }

In the example above, I used the HubL code to pull the primary font from your settings. If you wanted to select a different font, you would use something like this:

body {
font-family: Arial, Helvetica, sans-serif;
}


I normally use google fonts myself. You can also apply this to the paragraph or h1, h2 etc, just like you would in a css stylesheet. 

 

 

To quote this page from w3schools: "The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available" You can read more about this here.

 

Also make sure that when you insert this into the head of the template, you use style tags. So the complete code would be this:

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>

I hope this answers your question, Laura.

 

~India

0 Upvotes
LauraJJ
Member

Changing the font in the body of a template - CSS

Hi India, 

 

Thank you for your reply. I have had a go at adding your suggestions but in all honesty I am out of my depth with CSS/code and fear I will end up messing the whole thing up!

 

Is so annoying as I am able to manually change the rest of the written text in the email body, it is just the personlised tag (Jonathan Ward) where the font type is different 😕 

 

Screenshot 2018-03-20 at 09.00.56.png

I will pass your comments onto my manager who may be able to fix it, if not, i think i'm just going to have to leave it as it is 😞

0 Upvotes
ipowell
Contributor

Changing the font in the body of a template - CSS

Hey Laura, I have one last suggestion. You don't have to go into the template for this, you just edit the source code within the email body. It's a button like this: 

 

Screen Shot 2018-03-20 at 1.36.51 PM.png

 

The personalization token is the full name of the HubSpot user you selected. Since your token is at the very bottom of the email, just scroll all the way down and ignore the html above it. Your personalization token should look something like this: {{owner.fullname}}.

 

Put this <span> around it. The full html will look something like this:

 

<span style="font-family: Arial, Helvetica, sans-serif;">{{owner.fullname}}</span>

I hope this helps. Smiley Happy Sorry the first option didn't work out for you.

 

~India

 

0 Upvotes