Using Custom Fonts in the Email Builder

When you're creating emails that match your childcare center's brand, you might need to use custom fonts beyond the standard options available in Enrollio's email builder.

Custom fonts help your emails feel more on-brand, especially when working with specific brand guidelines. However, it's important to always include fallback fonts so your emails look great even when custom fonts aren't supported.

Understanding Email Client Support

Not all email clients support custom fonts. Here's what you need to know:

Email clients that support custom fonts:

• Apple Mail
• iOS Mail
• Samsung Mail
• Outlook.com

Because support is limited, you'll need to define a font-stack that includes standard system fonts as fallbacks. This ensures your emails render properly for all parents, regardless of which email client they use.

Example font-stack:
'OpenSansBold', Helvetica, Arial, sans-serif

Hosting Your Custom Fonts

You have a few options for hosting custom fonts:

• Google Fonts: Use a service like Google Fonts (free and reliable)
• Self-hosting: Host the fonts on your own server
• Enrollio hosting: We can host fonts for you — just provide proof of your font license

Pro Tip: Choose fallback fonts that are installed on most computers. This ensures your emails maintain a professional appearance even when custom fonts don't load.

Setting Up Custom Fonts with CSS

The most reliable way to include a custom font in your emails is using @font-face. Here's how to do it:

Basic Setup

Add this code to your email template:

<style>
@font-face {
  font-family: 'Festive', cursive;
  src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap')
}

* {
  font-family: 'Festive', cursive;
}
</style>

Handling Outlook Compatibility

Some versions of Outlook (2007, 2010, and 2013) don't support @font-face. To prevent issues, wrap your font declaration in a @media tag:

<style>
@media {
  @font-face {
    font-family: 'Festive', cursive;
    src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap')
  }
}

* {
  font-family: 'Festive', cursive, Arial, sans-serif;
}
</style>

Notice how we've included Arial, sans-serif as fallback fonts in the second declaration. This ensures parents using older Outlook versions still see professional-looking emails.

Testing Your Custom Fonts

Before sending emails to parents, always preview them across different devices and email clients. Use Enrollio's email preview feature to check how your custom fonts appear.

]

Pro Tip: Send test emails to yourself and check them on your phone, tablet, and computer. This helps you catch any font rendering issues before parents see them.

Best Practices

• Always define a complete font-stack with solid fallbacks
• Test your emails on multiple devices before sending
• Keep proof of font licenses if you're using premium fonts
• Choose web-safe fallback fonts that complement your custom font
• Consider using Google Fonts for easier implementation and broader support

Need help setting up custom fonts for your center? Contact our support team — we're here to help!