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:

layouts/main.html

<head>
  <!-- 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">

  <style>
    @tailwind components;
    @tailwind utilities;
  </style>
</head>

Template

If you only need Google Fonts in a certain Template, push to the head stack:

emails/example.html

<x-main>
  <push 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"
    >
  </push>

  <table class="font-merriweather">
    <!-- ... -->
  </table>
</x-main>

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

Notice the media="screen" attribute on the last <link> tag - that helps avoid the Times New Roman fallback font bug in older versions of Outlook.

Tailwind CSS 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:

tailwind.config.js

export default {
  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:

tailwind.config.js

export default {
  theme: {
    screens: {
      sm: {max: '600px'},
      xs: {max: '425px'},
      screen: {raw: 'screen'},
    }
  }
}

We can use it like this:

emails/example.html

<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.