「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

日本語フォント 源暎ラテミンがどうして...
 
共有:
通知
すべてクリア

[解決済] 日本語フォント 源暎ラテミンがどうしてもPC / スマホ / タブレットに反映されない

32 投稿
3 ユーザー
22 Likes
451 表示
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

お世話になります。

現在Cocoon 子テーマを使用し、WEB上で表示させたいフォントの変更作業を行っているのですが、

日本語フリーフォントの源暎ラテミンP_v2というフォントがどうしてもWEB上で表示されず、ゴシックのような文字に置き換えられてしまいます。

サーバーの子テーマ直下にインストールしたフォントをアップロードする際にも、もともとのファイルの大きさが大きすぎたためか、TTCフォルダをアップロードしても、ttfファイルが空の状態でアップロードできず、自分で調べながら

サブセットフォントメーカーでfftフォントを軽量化

したり(12kb)、woffに変換してアップロードが成功したものの、やはりWEB上には表示されませんでした。

先日までは、A-OTF Maru Folk Pro Rというフォントをこちらでサポートいただきながらすべてに表示させることができていたのですが、急遽見出しのフォントを源暎ラテミンP_v2へ変更することになり、以前サポートしていただきました内容に沿ってCSSを設定してみましたがこのような状態が続いています。

サポートの程、どうぞよろしくお願いいたします。

----------------------------------------------
サイト名:氣樂
サイトURL: https://pikapika-okiraku.com
ホームURL: https://pikapika-okiraku.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.2.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:en-US,en;q=0.9,ja;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.0.3
カテゴリー数:6
タグ数:1
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:1639バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:1
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam: Spam Protection 5.1
BackWPup 4.0.0
Contact Form 7 5.7.7
Contact Form 7 add confirm 5.1
HubSpot All-In-One Marketing - Forms, Popups, Live Chat 10.1.24
Japanese font for WordPress (Previously: Japanese Font for TinyMCE) 4.28
SiteGuard WP Plugin 1.7.5
Stylish Cost Calculator 7.4.3
WP File Manager 7.1.9
----------------------------------------------


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

源暎ラテミン

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@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などがいいと思います。

This post was modified 10か月前 by Akira

   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@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;
}


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@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 の前のスペースを一旦すべて消すといいと思います。

This post was modified 10か月前 2回 by Akira

   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@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;
}


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@pikapika さん

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

こうなっていますが…

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

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

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

   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

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

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

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

 


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

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

 


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@pikapika さん

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

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

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

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

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

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

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

ご返信感謝いたします。

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

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

2.読み込んでいる woff2 ファイルのサイズ(容量)が 6076 バイト。

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

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

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@pikapika さん

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

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

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6867
 

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

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

 
 
確認すると、2文字ほどGenEiLateMinが適用されているようです。
 
「ステージ衣装」は6文字。
そして、前にスペースがあり、あわせて7文字になろうかと思います。
 
ここから推測すると。
おそらく、スペースと、「ー」(カタカナの長音)の2文字が、適用されているのではないでしょうか。
 
投稿者:: @pikapika

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

これが、サブセットフォントメーカーに、上記の文字をそのまま入力したという意味であれば・・・ですが。

サブセット化された文字は、「第一水準漢字 記号 ローマ字 カタカナ ひらがな」だけなのではないでしょうか。(スペースを含めて、21文字だけ)
(Akiraさんが仰っている通り)

そうであれば、容量が小さくなるのも頷けます。

そして、上記に「ローマ字」と言う文字があり、カタカナの長音が含まれています。
この長音が適用されているのではないでしょうか。

 
こういうものには疎いですので、あくまでも私の推測でしかないです。
見出しの文字を、サブセット化した時の指定した文字が含まれるようにして、テストしてみるとはっきり分かるのではないでしょうか。
(例えば、「第一水準漢字」などで試してみるとか)
 
 

   
pikapika reacted
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@mk2_mk2

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@pikapika さん

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

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

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

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

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

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

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

This post was modified 10か月前 2回 by Akira

   
pikapika reacted
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

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

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


   
pikapika reacted
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

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

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

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

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

スマホ


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@pikapika さん

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

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@mk2_mk2様

@akira 様

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

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

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

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6867
 

pikapikaさん

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

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

 
 

   
わいひら reacted
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

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

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

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

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

 

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@mk2_mk2

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

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

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

 


   
mk2 reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@pikapika さん

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

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

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

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


   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

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

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

 

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

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

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

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@pikapika さん

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

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

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

This post was modified 10か月前 by Akira

   
(@pikapika)
Eminent Member Registered
結合: 11か月前
投稿: 35
Topic starter  

@akira

おはようございます。

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

大変助かりました。

 

 


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました