Category Archives: Random

Custom Web Signature in Gmail

Image

If you have ever tried to add a fixed Gmail signature using the general settings, you may have noticed that the input doesn’t allow for raw HTML to be used. Whilst in most cases this probably isn’t a problem, it can be a little limiting in terms of how custom one can make their signature…for instance one may want hyperlinks and images as part of their mail signature.

There is a fairly easy way to include web content within your Gmail signature:

  1. Write your html content using whatever editor you like.
  2. Render the html (in a browser or JS Fiddle window).
  3. Select all of the rendered output, copy and then paste the output into the signature input box in the general settings of Gmail.

To show this method as an example, I’ve created a sample signature. To add this as a Gmail signature, select all from the result window, and then paste in your Gmail signature input box as follows:

Image

Save changes and that’s that!

Now you might be thinking that one could customize even further and use all kinds of custom fonts in the CSS (such as using google web fonts), however, it appears that Gmail does not allow custom fonts outside of the standard set already provided. Whilst a custom font is not a necessity, I thought it would be nice to find a way around this, albeit a crude one: what I did was to use an image instead (Yes, I said it was crude), which unfortunately also comes with the following limitations:

  • Multiple hyperlinks in the signature will not work.
  • The image may not scale well.

For straightforward signatures with one hyperlink, this method can work by making the entire image a hyperlink out to whatever address you like. To achieve this you can use the following steps:

  1. Write your html content using whatever editor you like.
  2. Render the html (in a browser or JS Fiddle window).
  3. Take a screenshot of the result, cut out the signature portion and save as a new image.
  4. Upload the image to an image hosting site (such as TinyPic) and take note of the image url.
  5. Use this example and replace the image and target urls as needed.
  6. Select the result, copy and then paste as input for your Gmail signature (as shown in the first example).
  7. Save changes in your Gmail general settings.

You should now have an image as your signature which links out to the target url when clicked. It’s not ideal, but may be suitable for your purposes if you wish to use more custom fonts.