Есть ли способ использовать веб-шрифты Google в электронном письме в формате HTML?

Электронная почта в формате HTML должна (должна) иметь встроенный CSS, чтобы иметь ожидаемый дизайн в большинстве почтовых клиентов.

Есть ли способ связать веб-шрифт Google с таким электронным письмом или встроить его в такое электронное письмо, сохраняя при этом широкое признание (надлежащее отображение) среди почтовых клиентов?

Я знаю, что альтернативой было бы изображение с соответствующей типографикой, но я бы сначала поискал что-то другое, что могло бы сработать.


fonts css google-webfonts html-email
person Gabriel Petrovay    schedule 29.06.2013    source источник

Ответы (2)


arrow_upward
29
arrow_downward

Если шрифт абсолютно необходим, вам придется использовать текст в качестве изображения. По состоянию на декабрь только iOS Mail, Mail.app, Lotus Notes 8, Mail по умолчанию на Android, Outlook 2000 и Thunderbird поддерживают использование внешнего пользовательского шрифта.

См.: http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

Редактировать 10.02.2014: Поскольку это один из моих самых популярных ответов, вот обновленная ссылка на лучшие практики использования веб-шрифтов в электронных письмах:

http://www.campaignmonitor.com/resources/will-it-work/webfonts/

person samanthasquared    schedule 01.07.2013

arrow_upward
4
arrow_downward

Теперь вы можете использовать пакет NPM custom-fonts-in-emails для встраивания пользовательских шрифтов в виде изображений в свои электронные письма. https://github.com/crocodilejs/custom-fonts-in-emails

import customFonts from 'custom-fonts-in-emails';
import path from 'path';

const options = {
  text: 'Make something people want',
  fontNameOrPath: 'GoudyBookletter1911',
  fontColor: 'white',
  backgroundColor: '#ff6600',
  fontSize: 40
};

customFonts.png2x(options)
  .then(console.log)
  .catch(console.error);

Выходы:

<img width="461" height="51" src="data:image/png;base64,..." title="Make something people want" alt="Make something people want" style="color: white;font-size: 25.5px;line-height: 51px;text-align: center;background-color: #ff6600;">

Оказывает:

person niftylettuce    schedule 03.11.2016