# 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:
```html [layouts/main.html]
```
## Template
If you only need Google Fonts in a certain Template, push to the `head` stack:
```html [emails/example.html]
```
You'll see `` in `main.html` - that's where Google Fonts will be output!
Notice the
`media="screen"`
attribute on the last
``
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:
```js [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:
```js [tailwind.config.js]
export default {
theme: {
screens: {
sm: {max: '600px'},
xs: {max: '425px'},
screen: {raw: 'screen'}, // [!code ++]
}
}
}
```
We can use it like this:
```html [emails/example.html]
Lorem ipsum
Labore exercitation consequat tempor quis eu nulla amet.
```
## @font-face
Some email clients or
ESP
s don't support `` 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 `