NodeJS中用nodemailer/email-templates/ejs实现邮件自定义字体的问题求助

Hey there! I totally get wanting your wedding invites to look perfect without resorting to converting fonts to images—let's break down practical, low-fuss solutions that work across most major email clients like Gmail and Outlook.

Why Your Current <link> Approach Isn't Working #

First, a quick reality check: Most email clients (including Gmail) strip out external <link> stylesheets from the <head> section entirely. That's why your Google Fonts link isn't being picked up—those clients never load it at all.

Practical Solutions to Try #

1. Embed Fonts as Base64 (Best for Wide Compatibility)

This is the most reliable way to get custom fonts working in most clients. Here's how to do it:

• Download the Tillana font files (TTF or OTF) you need (stick to just the weights/styles you use to keep email size down).
• Convert the font file to a Base64 string (use any free Base64 converter tool for files).
• Add an @font-face declaration directly in your email's <style> block (not an external sheet):

  <style>
    @font-face {
      font-family: 'Tillana';
      src: url(data:font/truetype;base64,[YOUR_BASE64_STRING_HERE]) format('truetype');
      font-weight: normal;
      font-style: normal;
    }
  </style>
  

• Keep your inline style="font-family: 'Tillana', Open Sans, Helvetica, Arial, sans-serif;" on your <td> elements.

This works in Gmail, Outlook 2016+, Apple Mail, and most modern clients. Older Outlook versions (2013 and below) will fall back to your backup fonts, which is a reasonable tradeoff.

2. Refine Your Fallback Font Stack

Even with embedded fonts, some clients might still fall back. Make your fallback stack match Tillana's style as closely as possible:

• Since Tillana is a playful, handwritten-style font, adjust your font-family to prioritize web-safe alternatives with a similar vibe:

  font-family: 'Tillana', 'Brush Script MT', 'Apple Chancery', 'Segoe Script', Open Sans, Helvetica, Arial, sans-serif;
  

This way, if the custom font doesn't load, the email still feels cohesive with your wedding's aesthetic.

3. Target Outlook with Conditional CSS

Outlook (especially desktop versions) has weird CSS support. Use conditional comments to serve it a specific fallback font that looks great:

• Add this to your email's <head>:

  <!--[if mso]>
  <style>
    .tillana-text {
      font-family: 'Brush Script MT', serif !important;
    }
  </style>
  <![endif]-->
  

• Then add the tillana-text class to any elements that should use the font:

  <td class="tillana-text" style="font-family: 'Tillana', 'Brush Script MT', ...;">Your invite text here</td>
  

This ensures Outlook users see a font that matches your design intent, while other clients use your embedded custom font.

4. Test Early and Often

• Send test emails to your own Gmail, Outlook, and Apple Mail accounts to see real-world rendering.
• Use email testing tools to preview how your invite looks across dozens of clients (this helps catch edge cases you might miss with personal accounts).

Final Notes #

Converting fonts to images is a last resort—embedded Base64 fonts combined with a thoughtful fallback stack and Outlook-specific CSS will cover 90%+ of your guests' inboxes without the extra work of image-based text.

内容的提问来源于stack exchange，提问作者R3uK