How To Add Link to Image on Email Signature
This time I’ll explain how to add a link to a picture in Gmail – this way you can link the logo to your site, or any other image or text to social networks.
Are you fed up with your ordinary email font? We will guide you to add Google fonts in Email.
No doubt, Times New Roman or Arial font makes your email pretty good, but what if you want to add a little flavor to it?
Lately, web fonts are increasingly popular in email, and there is a reason for it.
Email engagement doesn’t only depend on what is written in it but also on presentation skills. Email marketers use attractive web fonts that best fit the message of the email. It’s because a specific yet eye-catching web font can play a substantial role in building up a brand’s identity. A good web font hooks the reader to read and explore what you have to offer in the email.
There are many web font options available online, such as Google Fonts, Adobe Type kit, MyFonts, Commercial Type, Fontspring, FontShop, etc.
Since Google fonts are easier to get and have a myriad of beautiful fonts, many brands rely on Google fonts as a creative solution for their email campaigns.
If you are also going to use Google fonts in your email, have a look at things that you should know before considering Google fonts in your email campaigns:
Let’s first understand the difference between web fonts and web safe fonts.
Web Safe Fonts are actually the default fonts that work across many systems and devices. Web safe fonts include Arial, Times New Roman, Verdana, Georgia, Helvetica, etc.
On the other hand, web fonts are unlikely to be found on every operating system and device. However, they are supported by certain notable email clients.
The major email clients that support Google fonts are:
Unfortunately, Gmail is not on the list to support Google fonts.
Web fonts including Google fonts are not universally accepted in every email client. Due to excellent browser support, web fonts work fine for web pages but not for every email client.
As a result, if the device or system doesn’t support web fonts, the email will fall back to the default font style that can drastically affect your email format.
Here is an overview of email clients and their web font support:
| Email client | Web Font Support |
|---|---|
| Outlook.com | No |
| Outlook 2007-2016 | No |
| Outlook 2019 | No |
| Outlook for Mac | Yes |
| Outlook Office 365 | No |
| Outlook App | No |
| Gmail | No |
| Gmail App | No |
| iOS | Yes |
| Apple Mail | Yes |
| Samsung Mail | No |
| AOL Mail | No |
| Office 365 | No |
| Yahoo! Mail | No |
To use Google web fonts for HTML OR CSS email, you just need to follow the simple steps below.
So, let’s get started:
Visit www.google.com/fonts to browse and choose your favorite Google fonts. After selecting the font, you can add it to your email via three methods i-e
Let’s have a look at each method:
It is the preferred method as it produces consistent results and loads the fonts in parallel with email. As a result, fonts are shown sooner.
You just have to add the <link> tag in the <head> of your email. You can also add the <link> tag in the <body>.
Here is a sample code snippet:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
The @import method also works well but not as fast as the <link> method. You have to wait until the entire email is loaded, and then Google font loads at last.
Here is a sample code snippet:
<style>
@import ulr('https://fonts.googleapis.com/css?family=Roboto');
</style>
@Font-face method is a direct-to-the-source method to import web fonts. This method is more reliable because you choose the format of the web font which you want to import.
The best format for the fonts is .woff, which is widely supported for email. To get this type of code, you need to follow the given steps
Here is a sample code snippet:
@Font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular), URL(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxM.woff) format ('woff');
}
Another important thing to remember is to provide a web-safe fallback font. If the recipient uses an email client that does not support Google fonts, the message will then be shown in the fallback font.
For example, if you are using Google fonts, some versions of Outlook may not support the font and show the email in default Times New Roman font.
So, if you used a Google font for the entire template, force the outlook to use your fallback font on the entire template by embedding the given code after the <body> tag in the email template. The code looks like this:
<!--[if gte mso 9]>
<style type="text/css">
body, table, th, td, span, ol, ul, li {font-family: Verdana, sans-serif !important;
}
</style>
<![endif]-->
If you use a Google font only in certain parts of the template, target them individually by creating and applying a class to anywhere in the template. Code for outlook with class named “fallback-font” looks like this:
<!--[if gte mso 9]>
<style type="text/css">
.fallback-font {font-family: Verdana, sans-serif !important;
}
</style>
<![endif]-->
If the email recipient uses an email client that doesn’t support web fonts, it will strip the head of your HTML email signature. Unless the recipient has the exact font installed in his PC or Mac, the email signature would not appear in the same format and design.
Therefore, even if the email client supports the email signature web font, we wouldn’t suggest using them because there is always the risk of changing email signature formatting.
After putting significant effort into your email fonts, why are you leaving the ending barren?
An impressive and professional email signature is one of the pillars of successful email campaigns. With Hatima, an online signature creator by YourEmailSiganture, you can create impressive email signatures using web safe fonts.
Here, the process of creating an email signature is quite simple. You just have to add contact details, a logo or image, and links to your portfolio or website to get a professional email signature. Email signatures created by Hatima will be displayed in the format and design that you chose as your signature.
Moreover, it provides the following email signature features
Lighten up your email campaigns using web fonts, especially Google fonts. These web fonts are a great way to make your emails stand out among several other newsletters.
Also, bring the things to an extra level by adding an email signature using YourEmailSiganture. We are just a click away to create a unique yet impressive email signature.
This time I’ll explain how to add a link to a picture in Gmail – this way you can link the logo to your site, or any other image or text to social networks.
YourEmailSignature site created in order to allow you to create a personal or business signature quickly, easily and online directly to email.
Do you want some helpful tips to make it more successful? If yes, then here, we have mentioned a complete guide on an email signature for graduate students.