django fonts django-templates html-email

Using fonts in django HTML email templates

I have a html template for a password reset email that I am trying to set up instead of the default django email. The code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Inter", sans-serif;
        font-size: 20px;
        color: #434343;
        margin: 0;
      }

      .main-container {
        max-width: 60%;
      }

      .centered-contents {
        display: flex;
        justify-content: center;
      }

      .pswd-button {
        background: #677db6;
        border-radius: 25px;
        color: #ffffff;
        cursor: pointer;
        text-decoration: none;
        padding: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .top-bar {
        width: 100%;
        background-color: #d9d9d9;
        display: flex;
        align-items: center;
      }

      .top-bar-title {
        color: #677db6;
        margin: 20px;
      }

    </style>
  </head>
  <body>
    <div class="top-bar">
      <p class="top-bar-title">Nombre de Web</p>
    </div>

    <div class="centered-contents">
      <div class="main-container">
        <p style="font-size: 24px">
          Hola <span style="color: #677db6">nombre</name></span>!
        </p>

        <p>
          Está recibiendo este correo porque ha solicitado un cambio de
          contraseña en
          <span style="color: #677db6">web</span>. Para
          continuar, por favor utilice el botón que se muestra a continuación:
        </p>

        <div class="centered-contents">
          <a class="pswd-button" href="#"> Restablecer Contraseña </a>
        </div>

        <p>
          Le recordamos su nombre de usuario:
          <span style="color: #677db6">usuario</span>
        </p>

        <p>
          Si no ha solicitado ningún cambio de contraseña, no se preocupe. Puede
          ignorar este correo.
        </p>
        <p>Atentamente,</p>
        <p>El equipo técnico de <span style="color: #677db6">Web</span></p>
      </div>
    </div>
  </body>
</html>

And, rendered in my browser (chrome), it looks like this:

I am trying to use the template in django, by creating a password_reset_email.html with the previous code in my templates folder and passing it to django.contrib.auth.PasswordResetView. However, the email I get (displayed in gmail) looks like this:

What am I doing wrong here? I have tried the following things to fix this:

Remove all css and put all the styles inside the components.

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body style="
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: #434343;
    margin: 0;
    ">
    <div style="
      width: 100%;
      background-color: #d9d9d9;
      display: flex;
      align-items: center;
      ">
      <p style="
        color: #677db6;
        margin: 20px;
        ">
        Nombre de Web</p>
    </div>

    <div style="
      display: flex;
      justify-content: center;
      ">
      <div style="max-width: 60%;">
        <p style="font-size: 24px">
          Hola <span style="color: #677db6">nombre</name></span>!
        </p>

        <p>
          Está recibiendo este correo porque ha solicitado un cambio de
          contraseña en
          <span style="color: #677db6">web</span>. Para
          continuar, por favor utilice el botón que se muestra a continuación:
        </p>

        <div style="
          display: flex;
          justify-content: center;
          ">
          <a style="
            background: #677db6;
            border-radius: 25px;
            color: #ffffff;
            cursor: pointer;
            text-decoration: none;
            padding: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            " 
            href="#"> Restablecer Contraseña </a>
        </div>

        <p>
          Le recordamos su nombre de usuario:
          <span style="color: #677db6">usuario</span>
        </p>

        <p>
          Si no ha solicitado ningún cambio de contraseña, no se preocupe. Puede
          ignorar este correo.
        </p>
        <p>Atentamente,</p>
        <p>El equipo técnico de <span style="color: #677db6">Web</span></p>
      </div>
    </div>
  </body>
</html>

This fixes everything BUT the font and the alignment

Add table structure for alignment:

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet" />
</head>

<body style="
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  color: #434343;
  margin: 0;
  ">
    <div style="
      width: 100%;
      background-color: #d9d9d9;
      display: flex;
      align-items: center;
      ">
        <p style="
        color: #677db6;
        margin: 20px;
        ">Nombre de Web</p>
    </div>
    <table cellspacing=”0” cellpadding=”0” width="100%">
        <tr>
            <td width="25%"></td>
            <td>
                <table cellspacing=”0” cellpadding=”0” width="100%">
                    <tr>
                        <td>
                            <p style="font-size: 24px">
                                Hola <span style="color: #677db6">nombre</name></span>!
                            </p>

                            <p>
                                Está recibiendo este correo porque ha solicitado un cambio de contraseña en
                                <span style="color: #677db6">web</span>. Para continuar, por favor utilice el botón que se muestra a continuación:
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" style="padding: 15px;">
                            <a style="
                              background: #677db6;
                              border-radius: 25px;
                              color: #ffffff;
                              cursor: pointer;
                              text-decoration: none;
                              padding: 15px;
                              padding-top: 10px;
                              padding-bottom: 10px;
                              " href="#">Restablecer Contraseña</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                Le recordamos su nombre de usuario:
                                <span style="color: #677db6">usuario</span>
                            </p>

                            <p>
                                Si no ha solicitado ningún cambio de contraseña, no se preocupe. Puede ignorar este correo.
                            </p>
                            <p>Atentamente,</p>
                            <p>El equipo técnico de <span style="color: #677db6">Web</span></p>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="25%"></td>
        </tr>
    </table>
</body>

</html>

This leaves just the font still not working:

So, my question is: How can I make the font (Inter, font weight 300) display properly too?

Solution

You assume Gmail should support it's own font library!

In fact it only supports Google Sans and Roboto.

@import uses @font-face, which has the following email support: https://www.caniemail.com/features/css-at-font-face/ (Footnote: Not supported. Roboto and Google Sans can be used, but only because they’re embedded with the webmail’s own styles.)

I therefore suggest you add to your font stack one of those if you have a preference, e.g. Inter, Roboto, sans-serif (without loading Roboto via @import, because it's already loaded internally). You should also add Arial or similar websafe font for those who don't support either of those.

Final stack: Inter, Roboto, Arial, sans-serif;