Using Google Fonts In ActiveCampaign

Share this article:

Using Google Fonts In ActiveCampaign Email Editor | Image showing two hands drawing different types of typography - Juan Rojo Design Toronto

 

Easily Add Custom Google Fonts In ActiveCampaign

Using Google Fonts in ActiveCampaign email editor is easier than you may think. By making use of their HTML content block in the email editor, you can still use their templates and add a little bit of customization to your campaigns. However, you still need to add CSS code, but don’t worry because I’m also including the code snippets in this article.

Adding Custom Google Fonts To The Top Of Your Email

The process of using Google fonts in ActiveCampaign email editor starts with an HTML content block. In other words, you need to drag the HTML content block to the top of the email.

Using Google Fonts In ActiveCampaign Email Editor

When the HTML block is in place, you need to add the following code snippet:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Open+Sans:400,300,700" rel="stylesheet" type="text/css" />
<style type="text/css">h1,h2,h3,h4,h5 { 
  font-family: 'Playfair Display', serif !important; 
  font-weight: 700 !important; 
}

Adding Custom Google Fonts In The Body Of The Email

Using Google fonts in ActiveCampaign email editor is now just one step away. However, you still need to style the heading with inline CSS, as none of the headings in this particular example are actual headings. In other words, they are just regular text using different font sizes.

Once again, you need to insert an HTML block where you plan to place the heading. As shown in the sample below:

Using Google Fonts In ActiveCampaign Email Editor

Just as we did previously, you need to add the following code snippet for that particular content block:

<h2 style="text-align:center;font-family: 'Playfair Display', serif;font-weight:700;font-size:36px;">Custom Fonts & Styles</h2>

Don’t Know How To Get Custom Google Fonts?

Using Google fonts in ActiveCampaign Email Editor requires you to first get the font from Google. Therefore, you need to get that sorted first, which is described in detail in this article.

Please keep in mind that at this time, not all email clients support custom Google fonts. iOS and Apple Mail support them just fine, but you need a fallback for other major clients like Gmail, Outlook, etc.

Watch The Full Tutorial on YouTube