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',

You can then use a <link> tag to import them in your Layout:

<if condition="page.googleFonts">
  <link href="{{ page.googleFonts }}" rel="stylesheet" media="screen">

Front Matter

Use the googleFonts key in the Front Matter of a Template to import Google Fonts only in this Template:

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

<extends src="src/layouts/base.html">
  <block name="template">
    <!-- ... -->

Tailwind CSS utility

After defining which Google Fonts to import, you need to register the fontFamily 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"',
      '"Segoe UI"',
    // ...

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

Avoid inlining

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 Tailwind's breakpoints and tuck the class inside an @media screen {} query.

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

First, we register a screen breakpoint:

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

We can now use it in the HTML:

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