Как добавить семейство шрифтов в HTML-шаблон электронной почты - PullRequest
Новая
       1

Как добавить семейство шрифтов в HTML-шаблон электронной почты

0 голосов
/ 04 сентября 2018

Эй, у меня проблема с добавлением стиля шрифта к моему шаблону подтверждения, который я отправляю своим клиентам по электронной почте после выполнения заказа. Я знаю, что встроенный CSS прекрасно работает с шаблоном электронной почты html, но я пытаюсь добавить семейство шрифтов Heebo из Google и могу загрузить его в тег head, который не будет работать в gmail и hotmail. 

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"></head>

сейчас это моя голова. но это не будет работать в Gmail или Hotmail, как я уже сказал.

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Я включаю это таким образом. Вы можете получить это от веб-шрифтов Google. Это работает на Outlook (IOS), Apple Mail, iPad, iPhone. Остальные не поддерживают веб-шрифты. Поэтому у вас должен быть запасной шрифт, который будет работать по умолчанию.

В идеале ваша электронная почта должна представлять собой гибрид текста на основе текста и изображений.
Быть на 100% основанным на изображениях сейчас несколько устарело, поскольку вы ничего не видите, когда браузер автоматически скрывает изображения и не может найти что-либо или выделить любую полезную информацию, например, названия продуктов.

полезная статья, охватывающая это: https://litmus.com/blog/the-ultimate-guide-to-web-fonts

@media screen {
 /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqhPANqczVsq4A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
}
0 голосов
/ 04 сентября 2018

быстрый ответ. Вы не можете сделать это.

В целях безопасности gmail, hotmail, outlook и т. Д. Блокируют внешние шрифты.

из-за этого письма обычно создаются с изображениями, а не со 100% текстом.

Если вы не хотите использовать изображения, вы должны использовать безопасные шрифты (шрифты, которые существуют во всех операционных системах).

удачи

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...