Part 3: How to Customize Your Email Signature Text and Font
So you’ve downloaded an html email signature template, and you just need to edit it to include your details and maybe your company style. We’re using our Consuela Bananahammock template but you can use any other template you find. I’d say you can use templates from anywhere, but I honestly haven’t found any free email signature templates on the internet which correctly address the many compatibility issues that you have to code around. So just have a look through ours to be safe! In saying that, please let everyone know if you find some good free templates in the comments section.
Links to the other parts of this guide below:
- Part 1: Coding Email Signatures Introduction – These prerequisites are required in order to create a HTML email signature.
- Part 2: The HTML Layout – Relatively difficult and deceptively time consuming. Guides you through rearranging html so you can quickly make changes to the example signatures.
- Part 3: Text Guide – Shows you how to preview and quickly change the text and text related style in html.
My aim for this part of the guide is to teach all of the “gotcha’s”, time saving tricks, and general html and css knowledge needed to allow someone with no existing html knowledge to change the text, font, and font style in an email signature template so that it lines up with an existing company style.
If you don’t have sublime text editor installed and one of our templates downloaded, read through part 1 of this guide entirely. You’ll then need to know some html and editing basics. If you’re unfamiliar with this, read through Email Signature Layout Getting Started Section and come back here.
Okay lets get too it… As per part 2, extract the email signature template into a new folder called “signature”. Now, open the folder and find the file called “signature-example.html”. The best way for you to make changes to your email signature (or code in general) is to make small changes and view the results quickly and repeat this process. This is especially important when you don’t have much html experience.
Open the email signature in Google Chrome (don’t use Internet Explorer or Edge). When it’s open, you should be able to see a complete signature including images. If you don’t see the images, it means they aren’t in the same folder as the html file.
While Chrome is open, right click the same html file and choose “Open with Sublime Text” and then position each window next to each other so that you can see both as per the screenshot below.
Changing the Text
We’ll start with the basics. You want to change the signature so that your company details are in there instead of the example data. Since there’s a lot of code, the easiest way to get to the part you want to edit is using the search function in Sublime Text Editor. Press Ctrl + f to search the file. It’s best to search for single words since sometimes there may be code between one word and another. So search for “Consuela”. Keep these tips in mind:
- Be sure not to remove the surrounding tags by accident. This is especially important because if you accidentally remove an entire tag, the browser may still display the signature correctly, but when you go to install the signature, it won’t show up correctly.
- If you want to write the text on multiple lines, follow the instructions in the “Making New Lines” section of this guide. Don’t expect it to work by pressing enter or adding a <br> tag. (Don’t worry if you don’t know what I’m talking about just read the section below.)
Pressing enter doesn’t work when coding email signatures in HTML. The normal way to add a new line in HTML code is to use a <br> tag but if you’re using tables in your email signature, this isn’t the best way either since different email software adds different spacing between the lines which leads to an inconsistent look. The best way to add text that spans multiple lines is to add a new table row.
Luckily we’ve already covered how to move a row in part 2 of this guide in the “moving the address“. So just follow those instructions, except instead of cutting the address field, copy it and paste it directly below where it came from! Take extra care not to insert the code snippet in the wrong tags. Remember that they should be pasted directly below the previous closing </tr> tag.
If you want to delete a whole line of text, don’t just delete the text itself leaving the surrounding code. Be sure to remove the <tr> tags and everything between them. Now that I think about it, just use the “moving the address” section of part 2 once again! Now the only difference is that you just leave out the pasting part!
You thought maybe this one would be easy? Nope! You’ll come across a few compatibility problems if you just have a shot until you seem to have found a solution. Can you guess what the problem might be?
One problem is that when you view the signature in the browser it displays fonts that are stored on your computer. An Apple computer has different fonts to a Windows computer, which are different to an Android phone, which are again different to the fonts on iOS. Even if you think that you will only be sending signatures to Windows users, the fonts installed on a Windows computer change when you install Microsoft Office!
Another problem is that since different email programs may alter different parts of the html before rendering the final signature (especially web based email programs like Gmail), you have to specify the correct font to use in multiple places.
Now to the Coding…
In your text editor, you’ll notice that the font is specified in the following way.
<span style=”font-family: Calibri, Helvetica, sans-serif; font-size: 17.0px; font-style: normal; line-height: 19px; font-weight: bold; color: #008bb8; display: inline;”>
<font face=”Calibri, Helvetica, sans-serif“>Consuela</font>
The top line specifies the font as an inline style, the second line specifies the font using the ‘face’ tag attribute. For compatibility you’ll need to specify the font in both places.
The second thing you should notice is that there are multiple fonts specified on each line. The way this works is that the email program or browser will check to see if the first font is installed (Calibri), if not, it will try the next font (Helvetica) and so on.
List of Usable Fonts
- Arial, Helvetica, sans-serif
- Arial Black, Gadget, sans-serif
- Calibri, Helvetica, sans-serif
- Comic Sans MS, cursive
- ‘Courier New’, Courier, monospace
- Gadget, Arial Black, sans-serif
- Georgia, serif
- Helvetica, Arial, sans-serif
- monospace, Courier New
- ‘Lucida Sans Typewriter’, ‘Lucida Console’, monospace
- Palatino, ‘Palatino Linotype’, serif
- Tahoma, Geneva, sans-serif
- ‘Times New Roman’, Times, serif
- ‘Trebuchet MS’, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
You’ll notice that some of the fonts use single quotation marks which you will need to copy as well as the font. They aren’t required for all fonts though.
You should only use one, or at most two fonts in your email signature, and this is the case in our example. So in order to quickly change all of the fonts at once, we can use find and replace in our text editor!
So first, copy one of the fonts from the list above. Then in Sublime Text Editor, press Ctrl + h to bring up the find and replace bar. Now paste the new font into the “replace With” field.
Now, I was going to make a change on this website in order to prevent some confusion, but since you’re likely to come across this problem on other websites, and not understand how to fix it, we’ll fix the problem in our text editor instead.
The problem is that this website is coded in WordPress which changes apostrophes into sneaky impostrophes! Have a look at the difference in the image below.
Don’t get Caught by Impostrophes!
The easy fix is to highlight the apostrophes in the ‘find what’ field, and replace them with regular apostrophes. Both should look the same as each other.
Now, in the text body of the signature, highlight the existing font and be sure to exclude the trailing semi-colon. Now copy and paste it into the “find what” field.
In general its best to click “replace” rather than “replace all” since its easy to screw up a file with find and replace. For example, if the replacement text exactly includes the text from “find what”, you could keep replacing text forever!
In this case, since the two pieces of text (called strings), are going to be replaced in every instance and since the strings are fairly long, we should be safe clicking “Replace All”.
The font should now be updated… Go to the browser and refresh the screen to see the new font.