Google Fonts

Adding Google Fonts to your Maizzle templates is very easy: you simply copy the code they provide and paste it into your Layout or Template.

For this example, we'll use Merriweather and Open Sans.

Layout

Using the same Google Fonts in all your emails? Paste the code in your main Layout.

For example, add it before Tailwind CSS:

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap" rel="stylesheet" media="screen">

<if condition="page.css">
  <style>{{{ page.css }}}</style>
</if>

Template

If you only need Google Fonts in a certain Template, use a block:

<extends src="src/layouts/main.html">
  <block name="head">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      rel="stylesheet"
      media="screen"
      href="https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap"
    >
  </block>

  <block name="template">
    <table class="font-merriweather">
      <!-- ... -->
    </table>
  </block>
</extends>

You'll see <block name="head"></block> in main.html - that's where your Google Fonts will be output!

Tailwind utility

After pasting in the code from Google Fonts, you have one more thing to do: register the fontFamily utilities in your tailwind.config.js, so you can use classes generated by Tailwind.

For example, let's register a Tailwind utility for Open Sans:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'open-sans': ['"Open Sans"', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
        merriweather: ["'Merriweather'", 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      },
    },
  }
}

Now you can use the font-open-sans and font-merriweather utility classes.

Avoid inlining

Although having the font-family CSS inlined on the first element in your HTML should be enough, there might be situations where that isn't desirable.

Email clients that support web fonts don't actually require the font-family CSS to be inlined in your HTML. Therefore, we can make use of Tailwind's breakpoints and tuck the class inside an @media screen {} query.

This way it doesn't get inlined and you can keep this CSS away from any email client that doesn't support @media queries.

To do this, we first register a screen breakpoint:

module.exports = {
  theme: {
    screens: {
      screen: {raw: 'screen'},
      sm: {max: '600px'}
    }
  }
}

We can use it like this:

<div class="screen:font-open-sans">
  <h1>Lorem ipsum</h1>
  <p>Labore exercitation consequat tempor quis eu nulla amet.</p>
</div>

@font-face

Some email clients or ESPs don't support <link> tags or CSS import(), but do support web fonts. In such cases, you can use @font-face and add your Google Fonts right inside your <style> tag.

First, visit the URL that Google Fonts creates for you after you've selected your fonts.

In our example, it's the following:

https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap

You will see lots of @font-face declarations in there, for example

/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Copy only the @font-face declarations that you need and add them either in a Template or in the Layout your templates extend (for global usage) - see our web fonts in HTML emails guide to learn how to do so.

Note that you'll still need to register the Tailwind CSS utility in order to use the fonts.