Using Custom Fonts in the Email Builder

Overview

When designing branded emails in PXME, you may want to use custom fonts to better align with your practice’s identity. While custom fonts can enhance design, support varies widely among email clients, making it essential to define fallback fonts for consistent rendering across platforms.

Email Client Support

Custom fonts are supported by some but not all providers.

Supported Clients:

• Apple Mail

• iOS Mail

• Samsung Mail

• Outlook.com

Not Fully Supported:

• Gmail

• Older Outlook versions (2007, 2010, 2017)

In unsupported clients, fallback fonts are displayed instead.

Defining a Font Stack

Always create a font stack (a hierarchy of fonts). This ensures that if the primary font isn’t available, a fallback font is used.

Example:

'OpenSansBold', Helvetica, Arial, sans-serif

• The system attempts OpenSansBold first.

• If unavailable, it falls back to Helvetica, then Arial, and finally a generic sans-serif.

Tip: Use resources like CSS Font Stack to choose reliable fallbacks.

Hosting Custom Fonts

You can:

• Use Google Fonts (recommended for simplicity).

• Host fonts securely on your own server.

CSS Setup for Custom Fonts

The most reliable method is with @font-face:

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

Where to Add CSS in PXME

• In the Email Builder, go to the Appearance tab and insert custom CSS.

• In workflow emails, paste custom code directly in the builder.

Special Notes for Outlook

• Outlook 2007, 2010, and 2017 do not support custom fonts unless the @font-face rule is wrapped in a @media tag.

• Without this, Outlook ignores custom fonts and defaults to fallbacks.

Custom Value Option in PXME

For reuse:

1. Copy your custom font code.

2. Save it as a custom value.

3. Apply it wherever needed in email designs.

Pro Tips

• Always Define a Font Stack: Ensure at least one fallback (Helvetica, Arial, sans-serif).

• Use Web-Safe Fallbacks: Stick to universally available fonts.

• Test Across Clients: Check rendering in Gmail, Apple Mail, Outlook, etc.

• Optimize for Outlook: Wrap @font-face in @media tags for older versions.

• Host Fonts Securely: Use Google Fonts or another reliable host.

FAQs

Q1: Which email clients support custom fonts?
Apple Mail, iOS Mail, Samsung Mail, and Outlook.com. Others require fallbacks.

Q2: How do I add a custom font to an email template?
Insert a @font-face CSS rule in the Appearance tab or add custom code in the builder.

Q3: What happens if a custom font isn’t supported?
Fallback fonts in your stack will display instead.

Q4: Can I use Google Fonts?
Yes. Link directly via @font-face, but always define fallback fonts.

Q5: Why is font rendering inconsistent in Outlook?
Older Outlook versions don’t support custom fonts unless wrapped in @media. Unsupported clients default to fallback fonts.