如何在邮件模板中自定义Google Font？Poppins字体无法生效求助

Hey there, I totally get how frustrating it is when web fonts don’t play nice in HTML emails—they’re notoriously finicky across clients. Let’s walk through the most likely fixes to get your Poppins font rendering correctly:

1. Double-Check Your @font-face Declaration #

Make sure your font declaration includes multiple formats for broad compatibility, and that the font files are hosted at a publicly accessible URL. Here’s a solid template to use:

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400; /* Adjust weight if using bold/light variants */
  src: url('https://your-hosted-url.com/poppins-regular.woff2') format('woff2'),
       url('https://your-hosted-url.com/poppins-regular.woff') format('woff'),
       url('https://your-hosted-url.com/poppins-regular.ttf') format('truetype');
  font-display: swap; /* Ensures fallback text shows while font loads */
}

Pro tip: Always include WOFF2 first—it’s the most efficient and widely supported by modern email clients.

2. Combine Inline Styles with Embedded CSS #

Most email clients ignore external stylesheets, so you need to:

• Add the @font-face rule inside a <style> tag in your email’s <head>
• Apply the font directly to text elements using inline styles (since some clients strip embedded styles too):

<p style="font-family: 'Poppins', Arial, sans-serif; font-size: 16px;">Your email text here</p>

Never skip the fallback font (like Arial or sans-serif)—this ensures your text remains readable if Poppins fails to load.

3. Handle Outlook Windows (The Big Culprit) #

Outlook for Windows uses the Word rendering engine, which doesn’t support web fonts. Add this conditional comment in your <head> to force a safe fallback for Outlook users:

<!--[if mso]>
<style>
  body, p, h1, h2, h3, h4, h5, h6 {
    font-family: Arial, sans-serif !important;
  }
</style>
<![endif]-->

This way, Outlook users will see Arial instead of broken Poppins.

4. Fix Cross-Origin Resource Sharing (CORS) Issues #

If your font files are hosted on a different domain than your email’s sending server, most email clients will block them. Make sure your server sends the correct CORS headers:

• For Apache: Add this to your .htaccess file:

  Header set Access-Control-Allow-Origin "*"
  

• For Nginx: Add this to your server block:

  add_header Access-Control-Allow-Origin *;
  

5. Test Across Email Clients #

Web font support varies wildly—Gmail, Apple Mail, and Samsung Email support WOFF2, but Outlook (as mentioned) and some older mobile clients don’t. Use testing tools to verify how your font renders across major clients before sending.

If you’ve tried all these steps and still have issues, double-check that your font files are correctly uploaded and the URLs in your @font-face are accurate (typos happen more often than you think!).

内容的提问来源于stack exchange，提问作者Đỗ Ngát