Google Fonts

Maizzle supports Google Fonts out-of-the-box, and it's very easy to use.

When checking Google's embed instructions for your font selection, simply copy and use the bold part after ?family=. Then, register the Tailwind CSS utility.

For example, let's pull in Merriweather, and Open Sans with some custom weights:

// config.js
module.exports = {
  googleFonts: 'Merriweather|Open+Sans:300,400,700',
  // ...
}

Adding them to the config will make them available globally, to all Templates.

Front Matter

Use googleFonts in Front Matter, to pull in Google Fonts only for this template:

---
googleFonts: "Roboto|Hind+Madurai&subset=latin-ext"
---

{% block template %}
  ...
{% endblock %}

Tailwind CSS utility

The googleFonts option only inserts the <link> tag, as you can see in the Starter:

{% if page.googleFonts %}<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family={{ page.googleFonts }}" rel="stylesheet"><!--<![endif]-->{%- endif %}

You still need to register the utilities in your tailwind.config.js.

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

// tailwind.config.js

theme: {
  fontFamily: {
    'open-sans': [
      '"Open Sans"',
      '-apple-system',
      '"Segoe UI"',
      'sans-serif',
    ],
    // ...
  },
  // ...
}
// ...

Now we can use the font-open-sans utility class.

Use in your template

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

This way, Juice doesn't inline it, and we also shave off some bytes 😎

For example:

<h1 class="all-font-open-sans">Headline text</h1>