Level 1

メールのフォント変更方法を教えてください

Forum|Forum|7 years ago
May 16, 2019
4 replies
268 views

セブンユニフォームの杉山と申します。

メールのフォントについてご質問させていただきます。

テンプレートを使いHTMLメールを作成しておりますが、自社WEBサイトと調和させるために、フォントを変えようとしています。

WEBサイトのはモリサワフォントを使用しているため、Georgiaが近いと思い

①元々Arialだったところをテキストボックスの選択肢からGeorgiaを選択

②コードを編集し、;font-family:'Lato', Arial, sans-serif;　を　;font-family:'Judson', Georgia, serif;　に書き換える

この2つを試して見ましたが、実際の見た目がArialから変わらず、行き詰まってしまいました。

※タイトルなど元々Georgiaのテキストは英字も日本語も見た目Georgiaですが、

　元々ArialだったテキストをGeorgiaに書き換えると、英字はGeorgiaになっていますが、日本語だけは変わってくれません。

私を含め社内にはコード編集できるものがいないため、検索し手探りで試行錯誤している状態です。

フォントの変更方法をご存知の方がいらっしゃいましたらご教授頂けないでしょうか？

恐れ入りますが、宜しくお願い致します。

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Taishi_Yamada

Level 6

@恵利花杉山さん、こんにちは、

質問投稿ありがとうございます

テンプレートを使いHTMLメールを作成しておりますが、自社WEBサイトと調和させるために、フォントを変えようとしています。

なるほど。

基本的に、日本語フォントは、ずばり日本語フォントをfont-familyとして指定してあげる必要がありますね。パソコンでいうと、WindowsとMacで標準で持ち合わせてるフォントが違うから、どうするの？というのも、定番の課題です。そしてスマホは、さらに違うという。。。。

主に想定するメール閲覧環境次第というとこではありますが、たとえばパソコンでとなると、Windows 10/今どきのMacが共通で持つフォントは「游ゴシック」なので、いまだとこれを先頭に指定する場合が多いですかね？

指定としては、"Yu Gothic"と"YuGothic”だったかな。。。。。

MarketoのStarterのEmail Templateのソースを眺めると、EmailでもWeb Fontを読ませる仕組みを入れているんですよね。でもまぁ、それは英語だからできる技。基本的に端末がもつフォントを前提にデザインするのが、Emailについては引き続き現実的だと思ってます（どなたか、Emailでも日本語でWebフォント化してますよ！という方います？そもそもレガシーなOutlookとかだと無理そうだけど。。。。試したことないので分かりませんが）。

あと、ややこしいのは、Emailだと一般的なWeb(LP)の場合と、フォント指定の手段がちょっと違うんですよね。

最近、たまたまあるMarketoのStarter Templateのソースをみてましたが、基本的にフォントの指定は<td>で、かけいるようなので、Templateとして、そこを操作(修正)しておくのが正攻法だと思っています。もちろん、その下の中身部分ついて、<div>とか<p>とか、場合によっては<span>でフォントを指定してあげることもできますが、そうすると、都度都度、HTMLソースを開いて変更する必要があるので面倒ですからね。。。。。。

ちなみに、スクリーンショットを貼っていただいたのは、どのTemplateだか分かりますか？それがStarter Templateのものであれば、ちょっとコードを眺めてみますよ。

よろしくおねがいします。

-Yamada

恵利花_杉山Author

Level 1

山田様

ご返信いただきありがとうございます。

主に想定するメール閲覧環境次第、端末がもつフォントを前提にデザインするのが基本なんですね。

メールでは、フォントよりも件名や内容に力を入れることにします！

スクリーンショットのテンプレートは「Limon」で、他には「skelton」をよく使用しています。

また余談ですが、WEBサイトのテキストをメールのテキストエディタにコピペするとフォントが変わりました。

Macでメールを見るとモリサワフォントのようでした。

（windows、outlookは相変わらずダメですが、デフォルトとは少し違うゴシック体になりました）

杉山

Taishi_Yamada

Level 6

主に想定するメール閲覧環境次第、端末がもつフォントを前提にデザインするのが基本なんですね。

ああ、ごめんなさい。誤解させてしまったかも。

「端末がもつフォントの中で、Font Familyを指定して制御する。」が基本という意味です。なので、EmailでもFont Familyは、もちろん指定します。

Webの場合は、端末が持つフォントに限定せず、ページ（サイト）を閲覧するときに、フォントファイルそのものをダウンロードさせて、Web作成者側が好きなフォントを使うことも（やろうと思えば）出来ますが、Emailでは、その手段は考えない。ということです。

なので、Font Familyは指定するのですが、とはいえ、「端末が標準で持つ日本語フォント」は数えるほどしかないですからね。

Macでメールを見るとモリサワフォントのようでした。

モリサワのフォントが入っている端末で、かつ、メール閲覧ソフトで利用するフォントが、デフォルトでモリサワのフォントになっていたら。。。。。その端末ではモリサワのフォントが表示されてしまうかもしれないですね。（もちろん、モリサワのフォントが入ってない端末でみたら、違う表示になるかと）。

どうだろう。font-familyの指定として、いまならパソコン想定で、ゴシック体なフォントを想定して書いたら、こんな感じですかね？

font-family: "YuGothic","游ゴシック体","Yu Gothic","游ゴシック","Meiryo","メイリオ","ＭＳＰゴシック", Arial;

優先は游ゴシック。”游ゴシック”と”游ゴシック体”、"YuGothic"と"Yu Gothic"と、似たようなのがあるのは、WindowsとMacでフォント名が違うからです。（アルファベット表記だけでも問題なかったかも。。。。ちょっと自身なしです）

游ゴシックが入っていない環境（たとえばWindows 7)なら、メイリオ。

それもなければ、”MS Pゴシック”。

という３段階ですね。

以上、ご参考までに。

-Yamada

恵利花_杉山Author

Level 1

山田様

ご丁寧にありがとうございます。

当方あまりにも無知なもので、Font Familyを指定すればその通りに表示されるはず、自分が普段見ているものサイトやEmailも勝手に反映されていると思い込んでおりました。。

EmailでもFont Familyは指定するけれども、端末が標準で持つ日本語フォントが少ないため、パソコンでWindowsやMacが共通で持つ「游ゴシック」を優先させるということですね。

教えていただいたfont-familyを参考にEmailテンプレートを作ってみます。

ありがとうございます！

杉山

Taishi_Yamada

Level 6

ところで、最近、Email/LPのHTML/CSSの書き方について、マルケトユーザーの方から聞かれることが結構あります。Templateを、それこそフォントちょっと修正したいとか、Starter Templateのうち、ある部分を削除したい。とかとか。。。１から作るとなると大変ですが、多少はカスタマイズできると良いのですが・・・。という相談ですね。

他方で、HTML/CSSについて「ほとんど何も知らないんです。なので、学ぶにしても、どこから手をつけてよいのやら・・・。」と悩まれている方。また、「HTML/CSSを頑張ってラーニングしてみたのだけど、LPはなんとなくわかったが、EmailのTemplateが、本で学んだHTML/CSSと全く違うのですが、これってどういうことでしょう？」という方。。。。とかですかね。

なので、そういう「はじめて、これからマルケトを使う上で、Email/LPの修正に必要なHTML/CSSを理解して、自分で改造できるようになりたい！」という方のために、少なくとも最初にラーニングはじめるための道標となるようなウェビナーを開催しようかなと思っています。そういうのあったら、嬉しいですかね？参加されます？（オンラインのウェビナーで、もちろんタダです）

マルケトの機能というより、汎用なHTML/CSSの理解の話ですからね。恐らく、マルケト公式ではされないと思うので・・・・。

してほしい！という要望が多ければ、軽く準備して実施しようかなと思っています。

-Yamada