Использование шрифтов в шаблонах электронной почты django HTML

У меня есть шаблон html для письма сброса пароля, который я пытаюсь установить вместо стандартного письма django. Код выглядит следующим образом:

<!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>

А в моем браузере (chrome) это выглядит следующим образом:

custom email template

Я пытаюсь использовать шаблон в django, создавая password_reset_email.html с предыдущим кодом в папке templates и передавая его в django.contrib.auth.PasswordResetView. Однако письмо, которое я получаю (отображаемое в gmail), выглядит следующим образом:

email

Что я делаю неправильно? Я пробовал следующие действия, чтобы исправить это:

  1. Удалите все css и поместите все стили внутрь компонентов.
<!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>

Это исправляет все, кроме шрифта и выравнивания

styling fixed

  1. Добавьте структуру таблицы для выравнивания:

Остается только шрифт, который все еще не работает:

tables for alignment

Итак, мой вопрос: Как я могу сделать так, чтобы шрифт (Inter, вес шрифта 300) тоже отображался правильно?

Вы полагаете, что Gmail должен поддерживать собственную библиотеку шрифтов!

Фактически он поддерживает только Google Sans и Roboto.

@import использует @font-face, который имеет следующую поддержку электронной почты: https://www.caniemail.com/features/css-at-font-face/ (Сноска: Не поддерживается. Roboto и Google Sans можно использовать, но только потому, что они встроены в собственные стили веб-почты.)

Поэтому я предлагаю вам добавить в ваш стек шрифтов один из них, если у вас есть предпочтения, например, Inter, Roboto, sans-serif (без загрузки Roboto через @import, потому что он уже загружен внутри). Вы также должны добавить Arial или аналогичный websafe шрифт для тех, кто не поддерживает ни один из этих шрифтов.

Конечный стек: Inter, Roboto, Arial, sans-serif;

Вернуться на верх