源暎ラテミン

https://okoneya.jp/font/download.html#dl-gel

以上のサイトより入手したものになります。

@pikapika さん

woffに変換してアップロードが成功したものの

現在子テーマにアップロードしているフォントファイルの拡張子は .woff なのでしょうか？CSS には .ttf とお書きになっています。

以下はその他に気になったことです。

① font-family の "Noto Sans Japanese" は不要です。

font-family: "GenEi LateMin","Noto Sans Japanese";

② 一方、以下の CSS には一般的な font-family も必ず書きます。

こうではなく…

.article h2,
.article h3 {
  font-family: 'GenEi LateMin';
}

このように書きます。

.article h2,
.article h3 {
  font-family: 'GenEi LateMin', sans-serif;
}

③ フォントファイルは .woff2 が望ましいです。woff2 が最も圧縮率が高く、Web フォントに最適です。一方、.ttf はサイズ（容量）が大きく、通常パソコンやスマホにインストールして使う拡張子です。

④ フォルダ名やファイル名にスペースを使うのはおすすめしません。GenEi LateMin であれば、GenEi-LateMin や genEi-lateMin 、GenEiLateMinなどがいいと思います。

@akira 様

早速サポートいただきまして、誠にありがとうございます。

アドバイスいただきました内容に沿ってwoff2へ変換しましたファイルをサーバー内子テーマ直下へへアップロードし、CSSを以下のように修正してみましたが、変化が見られないようです。どこか間違っていますでしょうか？ご教授いただけますでしょうか？よろしくお願いいたします。

/*Webフォントの読み込み*/
@font-face {
 font-family: "GenEiLateMin";
font-style: normal;
 src: url("./GenEiLateMin/GenEiLateMin.woff2") format("woff2type");
}

/*見出しを源暎ラテミンに*/
.article h2, .article h3 {
 font-family: "GenEiLateMin", sans-serif;
}

@pikapika さん

サーバー内子テーマ直下へへアップロードし

子テーマの直下にフォントファイルをアップロードされたのでしょうか？

CSS には子テーマの直下に GenEiLateMin フォルダを作成し、そのフォルダの中にフォントファイルをアップロードされたようにお書きです。

---

① font-family のスペースを消す場合は、クォーテーションマークは書いてはいけません。

こうではなく…

font-family: "GenEiLateMin";

こうです。

font-family: GenEiLateMin;

尚、font-family にスペースがあるのは何も問題ありません。

② format がおかしいです。

こうではなく…

src: url('./GenEiLateMin/GenEiLateMin.woff2') format("woff2type");

こうです。

src: url('./GenEiLateMin/GenEiLateMin.woff2') format('woff2');

③ スタイルシートに変な文字が入っています。添付画像のうち、font-family と src の前の□が変な文字です。この□を消す必要があります。おそらく□は見えないと思いますので、font-family と src の前のスペースを一旦すべて消すといいと思います。

@akira 様

再度サポートいただき、心より感謝いたします。

以下のように、アドバイスに沿って修正してみましたが、やはり反映されないようです。

Cocoon設定より全てのキャッシュを削除する必要があるでしょうか？なお、ブラウザーのキャッシュは削除いたしました。アドバイスの程、よろしくお願いいたします。

また、ご質問いただきましたように、現在子テーマの直下に GenEiLateMin フォルダを作成し、そのフォルダの中にフォントファイルをアップロードしなおしましたため、CSSは以下のようになります。

/*Webフォントの読み込み*/
@font-face {
font-family: GenEiLateMin;
font-style: normal;
src: url('./GenEiLateMin/GenEiLateMin.woff2) format('woff2');
}

/*見出しを源暎ラテミンに*/
.article h2, .article h3 {
font-family: "GenEiLateMin", sans-serif;
}

@pikapika さん

src のクォーテーションが閉じられていません。

こうなっていますが…

src: url('./GenEiLateMin/GenEiLateMin.woff2) format('woff2');

このようにご変更ください。

src: url('./GenEiLateMin/GenEiLateMin.woff2') format('woff2');

@akira 様

ご返信と再度チェックいただきましてありがとうございました。

源暎ラテミンの文字のサンプルを添付させていただきました。

続いて現状も添付させていただきます。

以下がPC現状となります。

やはり、反映されていないようです。

@pikapika さん

CSS には問題はなくなったと思います。woff2 のファイルはサイトで読み込まれてはいます。

強いて言えば以下の font-family のクォーテーションも不要ですが、フォントが適用されない原因だとは思えません。

.article h2,
.article h3 {
  font-family: "GenEiLateMin", sans-serif;
}

CSS に問題がないのにフォントが適用されない原因は分かりません。

ただ、読み込んでいる woff2 ファイルのサイズ（容量）が 6076 バイトと非常に小さいのが気になりました。

私のブログで読み込んでいるサブセット化後の Noto Sans CJK JP は、496604 バイトあります。また、日本語フォントよりサイズが小さい英字フォントでも 15000 バイト以上はあるはずです。

サブセットフォントメーカーで ttf フォントを軽量化されたとのことですが、フォントファイル自体は正常でしょうか？

@akira 様

ご返信感謝いたします。

ご指摘いただきました2点につきまして、

１．font-familyのクオーテーションも念のため削除いたしました。

２．読み込んでいる woff2 ファイルのサイズ（容量）が 6076 バイト。

もともとのttfファイルは9224kbございましたので、かなり小さくなり、私も気になっておりました。

そちらをサブセットフォントメーカーで ttf フォントとして軽量化したものは12kbでした。それをさらに

woff2へ変換したので、6kとなった次第です。

軽量化する場合、小さくなりすぎない方法等ございますでしょうか？

@pikapika さん

そちらをサブセットフォントメーカーで ttf フォントとして軽量化したものは12kbでした。

この時点でものすごく小さいですね。

5 年以上サブセットフォントメーカーを使っていないため使い方を忘れました。ただ、「フォントに格納する文字」というのがあったはずです。「フォントに格納する文字」には何をお書きになりましたか？「フォントに格納する文字」に入力した文字しかフォントファイルに含まれなかったと記憶しています。

@akira 様

フォントに格納する文字には、第一水準漢字　記号　ローマ字　カタカナ　ひらがなというものを入力いたしました。

こういうものには、まったく疎いもので、申し訳ないのですが・・・。
推測含みで書かせていただきます。

ご提示のあった、以下の「ステージ衣装」という部分ですが。

@mk2_mk2 様

早速サポートいただきまして、ありがとうございます。

それは知りませんでした。お知らせいただき、ありがとうございます。

@pikapika さん

pikapika さんのサイトからフォントファイルをダウンロードし、 https://fontdrop.info/ にアップロードしてみました。

すると、添付画像の文字しか入っていません。

そのため、見出しに「が」「な」を書くと GenEiLateMin が適用されました。

サブセットフォントメーカーの「フォントに格納する文字」には、GenEiLateMin で表示したい文字を全て書く必要があります。第一水準漢字の場合は「第一水準漢字」と書くのではなく、第一水準漢字の文字を全て書く必要があります。

日本語フォントをサブセットする場合には、以下のページがご参考になると思います。

https://github.com/ixkaito/NotoSansJP-subset

「JIS 第1水準漢字」には「亜」から始まる大量の漢字が書かれています。その他にも「U+0020 - U+007E」や「JIS 非漢字」などに大量の文字が書かれています。これらの文字を全て「フォントに格納する文字」に記入します。

私自身も初めて使用したツールだったのですが、他の方のサイトで使い方を説明されている中で、第一水準漢字　記号　ローマ字　カタカナ　ひらがな　の部分をコピペするようにと書かれていたので、その通りフォントに格納する文字として入力してみた次第です。他に何か必要だったのかもしれないです。

見出しに「が」「な」を入力した例です。GenEiLateMin（源暎ラテミン）が適用されます。

一方、フォントファイルには入っていない文字を使った「きもの」には GenEiLateMin は適用されていません。

@akira 様

いろいろお試しいただきまして、誠にありがとうございます。

再度詳しくお調べいただき感謝いたします。

やはり、全ての文字を入力する必要があったのですね。

添付いただきましたページを参考に、再度打ち込んでみます。

@akira 様

只今、全て打ち込んでというかコピペで貼り付けまして、woff2へ変換しましたところ749KBヘサイズが拡大しました。いかがでしょうか？ 

やはり、PC、タブレット、スマホ共に英語の大文字や漢字には変化が見られなかったようです。それらもサブセットの際に打ち込んでおいたのですが。

スマホ

@pikapika さん

ブラウザのキャッシュの削除で表示されないでしょうか？私の環境ではブラウザのキャッシュの削除後に、添付画像のように表示されました。

また、最初の H2 ですが、見出しブロック > 高度な設定 > 追加 CSS クラスに CSS をお書きではありませんか？ <h2> の class に CSS が混じってしまっています。

＠mk2_mk2様

＠akira 様

本日は、長時間にわたり手厚くサポートいただきまして、

誠にありがとうございました。

残念ながら源暎ラテミンはいずれのデバイスにも反映されなかったのですが、

大変勉強になりました。今後のためにしっかり記録し、

次に役立てたいと思います。

本当にありがとうございました。

pikapikaさん

いえいえ、Akiraさんの仰る通り、反映されていると思います。

私から見ても、反映されていますよ。

@akira 様

ありがとうございます！！

只今、あきらめかけていましたが、消したはずのCSSがなぜかトップページ内に残っておりました。

その後、ブラウザーのキャッシュを削除したところ、無事にスマホとPCに源暎ラテミンのフォントが表示されました。

本当に本当にありがとうございました。

最後にご質問なのですが、Cocoon設定の下にキャッシュ削除とあり、中に入ると全てのキャッシュ削除という箇所が出てきます。これは削除したほうが良いでしょうか？

@mk2_mk2 様

ご確認いただきまして、ありがとうございました。

私のデバイスからも確認させていただくことができました。

本当にサポートいただき、ありがとうございました。

@pikapika さん

Cocoon設定の下にキャッシュ削除とあり、中に入ると全てのキャッシュ削除という箇所が出てきます。これは削除したほうが良いでしょうか？

今回のこととは関係ないため、削除は必要ありません。

woff2へ変換しましたところ749KBヘサイズが拡大しました。いかがでしょうか？ 

どうしても日本語フォントはサイズが大きくなってしまいます。少しでもサイズを小さくされたい場合は、絶対に使わない文字をサブセットフォントメーカーの「フォントに格納する文字」に入力しないというのもいいかもしれません。

@akira 様

上記の質問につきまして再度詳しくサポートいただきまして、誠にありがとうございました。

大変助かりました。心より感謝いたします。

明日以降で結構なのですが、先程のページ内にご注文の流れという緑の見出しがございます。

その部分の見出しフォントだけが源暎ラテミンに変換されないようです。

この件につきまして明日以降、サポートいただければ幸いです。

どうぞよろしくお願いいたします。

ありがとうございました。

@pikapika さん

「ご注文の流れ」が <h5> のためです。

CSS には <h2> と <h3> に源暎ラテミンを適用するとお書きのため、<h5> には適用されません。

そのため、「ご注文の流れ」の見出しを <h5> から <h2> に変更されるのはどうでしょうか？ HTML として考えた場合も「ご注文の流れ」は <h2> が適しているように思えます。

@akira 様

おはようございます。

お忙しいところ、早速サポートいただきまして　誠にありがとうございました。

大変助かりました。