How to Add Google Fonts in Your Next Email Design?

According to a study, a message influences the reader’s mind when it is written in the most appropriate font. While designing an email newsletter, the main factor that is to be kept in mind is the typography. In order to showcase the mood behind the information that is written, we have wide variety of google fonts available.

There are 3 simple ways to add google fonts into your code :

Using the @import Method

Below is the code that includes the desired google fonts through @import method :

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i');

Google fonts also offers the feature of adding one font with different font weights. Depicted below is the way it can be done:

Standard Method

This method is fully supported by all the major email clients. Below is the code for the same :

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" >

@font-face method

This method can be considered as a direct way to including the web fonts from the source. Major advantage of using this method is the liberty of choosing from the five file formats – .eot, .woff, .woff2, .svg, and .ttf.

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff'); }

Having included the desired fonts for our html email template, we might encounter with the cases in which these fonts are not supported by the email clients. To solve this issue, we have a set of fonts that are called Fallback Fonts.

Specify in CSS

Use the CSS rules to specify font families:

font-family: 'Montserrat', sans-serif;

Keeping in mind the dimensions of our desired web font, we need to choose the appropriate fallback fonts. Another thing to consider is the font base ; if the used web font of serif than go with the serif based fallback fonts and likewise for the sans-serif web font. For example :

font-family: 'Montserrat', Verdana, sans-serif;

According to the above code snippet, if any email client doesn’t support web fonts will skip the first font , i.e., Montserrat, and the font rendered will be Verdana. If Verdana is also not supported on the device used, it would use the default sans-serif font as it is the last font mentioned in the snippet.The basic idea here is that even when the support of the web font is not available, the look and feel of the email remains the same.