htmlemailgoogle-fonts

Is it possible to use non-predefined fonts in a mailing designed with HTML? (Montserrat)

I'm creating a mailing with HTML but I'm having problems with the integration of the Montserrat font. When I run it on my local it looks perfect, but when I do the test mailing it doesn't pick up the font, instead it shows me sans-serif (the one I have in case it doesn't find Montserrat).

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:wght@400;500;700&display=swap"
          rel="stylesheet"
        />
        <title>Document</title>
    </head>
      <body>
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;
           max-width:600px;
           padding-top:40px;
           width:100%;
           background:black;
           font-family:'Montserrat', sans-serif;
           font-size:14px;"
        >
          ....

       </table>
      </body>

Is there any way to get it to take fonts that are imported from the head? I followed this thread but it doesn't work either:

How to use montserrat font in email template?

Thank you very much!

Solution

  • Custom font support in HTML emails is directly related to the support of @font-face declarations in email clients. And unfortunately, as reported by Can I Email, support is pretty low.

    Can I email… @font-face

    Custom fonts work in Apple Mail (on iOS or macOS), in Samsung Email (but not with an Outlook account), and a few other regional email clients (GMX.de on iOS, Web.dev on iOS, …).

    Your code is correct to embed custom fonts, but it just won't work everywhere.