web-dev-qa-db-ja.com

HTMLメールでGoogle Web Fontsを使用する方法はありますか？

ほとんどの電子メールクライアントで期待どおりのデザインを実現するには、HTML電子メールのCSSをインライン化する必要があります（推奨）。

Google Web Fontをそのようなメールにリンクまたは埋め込むが、メールクライアント間で広く受け入れられている（適切なレンダリング）方法はありますか？

別の方法としては、対応するタイポグラフィのある画像を使用することを知っていますが、最初に機能する可能性のある他のものを探します。

cssfontshtml-emailgoogle-webfonts
18
Gabriel Petrovay

フォントが絶対に必要な場合は、画像ソリューションとしてテキストを使用する必要があります。 12月の時点で、外部カスタムフォントの使用をサポートしているのは、iOSメール、Mail.app、Lotus Notes 8、Androidのデフォルトメール、Outlook 2000、およびThunderbirdのみです。

参照： http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

編集2/10/2014：これは私の最も人気のある回答の1つなので、メールのWebフォントのベストプラクティスに関する更新されたリンクは次のとおりです。

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

28
samanthasquared

これで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;">

レンダリング：

4
niftylettuce