GoogleフォントをHTMLメールに入れたい

Question

前提・実現したいこと

仕事でHTMLメール(注文確認メール)を作ることになりました。

HTMLメールにGoogleフォント「Noto Sans Japanese」を入れたいのですが

<link>が使用できない為、どのように設定をすればよいかがわかりません。 ※なるべくcssを新規で作らず、HTMLメール内への記述のみで作成できればと考えています。

■Noto Sans Japanese
https://googlefonts.github.io/japanese/#notosansjapanese

もしお分かりになる方がいらっしゃいましたらご教示いただけますと幸いです。

発生している問題・エラーメッセージ

GoogleフォントがHTMLメールに反映されない

該当のソースコード

HTML　※cssはなく上部の<style>内にコードを記述しています。

試したこと

html上部<style>内で下記のような指定をしましたが、いずれも反映されませんでした。

body{
                margin:0;
                padding:0;
                font-family: 'Noto Sans Japanese', ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic;
                color: #000;
            }

---

クラスを付けた場合も同様に反映されませんでした。

.wf-notosansjapanese{ 
                font-family: "Noto Sans Japanese"; 
            }

---

(他の方から引き継いだため)以下のコードが<style>内に記述されています。

/* font noto sans */
            @font-face{
                font-family: 'Noto Sans Japanese';
                font-style: normal;
                font-weight: 100;
                src: url('_asset/fonts/NotoSansCJKjp-Thin.otf');
            }
            @font-face{
                font-family: 'Noto Sans Japanese';
                font-style: normal;
                font-weight: 200;
                src: url('_asset/fonts/NotoSansCJKjp-Light.otf');
            }
            @font-face{
                font-family: 'Noto Sans Japanese';
                font-style: normal;
                font-weight: 300;
                src: url('_asset/fonts/NotoSansCJKjp-DemiLight.otf');
            }
            @font-face{
                font-family: 'Noto Sans Japanese';
                font-style: normal;
                font-weight: 400;
                src: url('_asset/fonts/NotoSansCJKjp-Regular.otf');
            }
            @font-face{
                font-family: 'Noto Sans Japanese';
                font-style: normal;
                font-weight: 500;
                src: url('_asset/fonts/NotoSansCJKjp-Medium.otf');
            }
            @font-face{
                font-family: 'Noto Sans Japanese';
                font-style: normal;
                font-weight: 700;
                src: url('_asset/fonts/NotoSansCJKjp-Bold.otf');
            }
            @font-face{
                font-family: 'Noto Sans Japanese';
                font-style: normal;
                font-weight: 900;
                src: url('_asset/fonts/NotoSansCJKjp-Black.otf');
            }

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

[m.ts10806]

url()　の場所に実際のフォントファイルはあるのでしょうか？

[funahashi]

ご指摘ありがとうございます。コード部分を修正いたしました。

[funahashi]

url()　の場所に「NotoSansCJKjp-Black.woff」など該当名のフォントはあるようですが、反映されていないようです。

[m.ts10806]

NotoSansCJKjp-Black.woff　はcssのどこにも書かれていませんよ。見たところ全て.otfですね。

[funahashi]

ご指摘ありがとうございます。初歩的なところを見落としており申し訳ございません。woffへ書き換えたところ正しく表示がされました。ありがとうございます。

[m.ts10806]

解決したということで良いでしょうか？自身で回答を書き自己解決としてはいかがでしょうか？teratailでは質問者自身で回答を書き「ベストアンサー」とすることで「自己解決」ができるようになっています。 https://teratail.com/help#resolve-myself

[funahashi]

ベストアンサーにさせていただきたいので回答部分にコメントをコピペしていただけますと幸いです。

[m.ts10806]

了解です。回答用に若干文章なおしますので少々お待ちください。

[funahashi]

お手数おかけいたします。よろしくお願いいたします。

Answer 1

cssにfont-faceの指定がありますがsrcに指定されている```_asset/fonts/NotoSansCJKjp-Thin.otf``などのファイルが実際には存在していないからだと思います。

実際のファイル名は
NotoSansCJKjp-Black.woff
とのことなので、ファイル名を合わせてはいかがでしょうか？

Comments

[funahashi]

回答ありがとうございます。大変助かりました。
初歩的なミスで申し訳ございませんでした。

[m.ts10806]

よくあると思います。.otfもフォントファイルとしては存在するものですし。
この手のものはまず記載と実際が合っているかというのが最初に疑わしきですね。