質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1621閲覧

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

funahashi

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/04/26 05:36

編集2018/04/26 06:01

前提・実現したいこと

仕事で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 Pゴシック, 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/ツールのバージョンなど)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/04/26 05:44

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

2018/04/26 05:45

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

2018/04/26 06:03

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

2018/04/26 06:03

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

2018/04/26 06:05

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

2018/04/26 06:20

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

2018/04/26 06:29

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

2018/04/26 06:29

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

2018/04/26 06:31 編集

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

2018/04/26 06:32

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

回答1

0

ベストアンサー

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

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

投稿2018/04/26 06:34

編集2018/04/26 06:37
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

funahashi

2018/04/26 06:37

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

2018/04/26 06:39

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問