サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年6月8日 11:42
お世話になります。
現在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
----------------------------------------------
Topic starter
2023年6月8日 12:13
2023年6月8日 15:09
@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 1年前 by Akira
Topic starter
2023年6月8日 15:41
@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;
}
2023年6月8日 16:18
@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 1年前 2回 by Akira
Topic starter
2023年6月8日 16:32
@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;
}
Topic starter
2023年6月8日 17:03
Topic starter
2023年6月8日 17:13
やはり、反映されていないようです。
2023年6月8日 17:36
@pikapika さん
CSS には問題はなくなったと思います。woff2 のファイルはサイトで読み込まれてはいます。
強いて言えば以下の font-family のクォーテーションも不要ですが、フォントが適用されない原因だとは思えません。
.article h2, .article h3 { font-family: "GenEiLateMin", sans-serif; }
CSS に問題がないのにフォントが適用されない原因は分かりません。
ただ、読み込んでいる woff2 ファイルのサイズ(容量)が 6076 バイトと非常に小さいのが気になりました。
私のブログで読み込んでいるサブセット化後の Noto Sans CJK JP は、496604 バイトあります。また、日本語フォントよりサイズが小さい英字フォントでも 15000 バイト以上はあるはずです。
サブセットフォントメーカーで ttf フォントを軽量化されたとのことですが、フォントファイル自体は正常でしょうか?
Topic starter
2023年6月8日 17:56
@akira 様
ご返信感謝いたします。
ご指摘いただきました2点につきまして、
1.font-familyのクオーテーションも念のため削除いたしました。
2.読み込んでいる woff2 ファイルのサイズ(容量)が 6076 バイト。
もともとのttfファイルは9224kbございましたので、かなり小さくなり、私も気になっておりました。
そちらをサブセットフォントメーカーで ttf フォントとして軽量化したものは12kbでした。それをさらに
woff2へ変換したので、6kとなった次第です。
軽量化する場合、小さくなりすぎない方法等ございますでしょうか?
2023年6月8日 19:28
こういうものには、まったく疎いもので、申し訳ないのですが・・・。
推測含みで書かせていただきます。
ご提示のあった、以下の「ステージ衣装」という部分ですが。
確認すると、2文字ほどGenEiLateMinが適用されているようです。
「ステージ衣装」は6文字。
そして、前にスペースがあり、あわせて7文字になろうかと思います。
そして、前にスペースがあり、あわせて7文字になろうかと思います。
ここから推測すると。
おそらく、スペースと、「ー」(カタカナの長音)の2文字が、適用されているのではないでしょうか。
おそらく、スペースと、「ー」(カタカナの長音)の2文字が、適用されているのではないでしょうか。
フォントに格納する文字には、第一水準漢字 記号 ローマ字 カタカナ ひらがなというものを入力いたしました。
これが、サブセットフォントメーカーに、上記の文字をそのまま入力したという意味であれば・・・ですが。
サブセット化された文字は、「第一水準漢字 記号 ローマ字 カタカナ ひらがな」だけなのではないでしょうか。(スペースを含めて、21文字だけ)
(Akiraさんが仰っている通り)
そうであれば、容量が小さくなるのも頷けます。
そして、上記に「ローマ字」と言う文字があり、カタカナの長音が含まれています。
この長音が適用されているのではないでしょうか。
こういうものには疎いですので、あくまでも私の推測でしかないです。
見出しの文字を、サブセット化した時の指定した文字が含まれるようにして、テストしてみるとはっきり分かるのではないでしょうか。
(例えば、「第一水準漢字」などで試してみるとか)
(例えば、「第一水準漢字」などで試してみるとか)
pikapika reacted
2023年6月8日 19:48
@pikapika さん
pikapika さんのサイトからフォントファイルをダウンロードし、 https://fontdrop.info/ にアップロードしてみました。
すると、添付画像の文字しか入っていません。
そのため、見出しに「が」「な」を書くと GenEiLateMin が適用されました。
サブセットフォントメーカーの「フォントに格納する文字」には、GenEiLateMin で表示したい文字を全て書く必要があります。第一水準漢字の場合は「第一水準漢字」と書くのではなく、第一水準漢字の文字を全て書く必要があります。
日本語フォントをサブセットする場合には、以下のページがご参考になると思います。
https://github.com/ixkaito/NotoSansJP-subset
「JIS 第1水準漢字」には「亜」から始まる大量の漢字が書かれています。その他にも「U+0020 - U+007E」や「JIS 非漢字」などに大量の文字が書かれています。これらの文字を全て「フォントに格納する文字」に記入します。
This post was modified 1年前 2回 by Akira
pikapika reacted
Topic starter
2023年6月8日 19:52
私自身も初めて使用したツールだったのですが、他の方のサイトで使い方を説明されている中で、第一水準漢字 記号 ローマ字 カタカナ ひらがな の部分をコピペするようにと書かれていたので、その通りフォントに格納する文字として入力してみた次第です。他に何か必要だったのかもしれないです。
Topic starter
2023年6月8日 20:04
@akira 様
いろいろお試しいただきまして、誠にありがとうございます。
再度詳しくお調べいただき感謝いたします。
やはり、全ての文字を入力する必要があったのですね。
添付いただきましたページを参考に、再度打ち込んでみます。
Topic starter
2023年6月8日 20:29
@akira 様
只今、全て打ち込んでというかコピペで貼り付けまして、woff2へ変換しましたところ749KBヘサイズが拡大しました。いかがでしょうか?
Topic starter
2023年6月8日 21:26
@mk2_mk2様
@akira 様
本日は、長時間にわたり手厚くサポートいただきまして、
誠にありがとうございました。
残念ながら源暎ラテミンはいずれのデバイスにも反映されなかったのですが、
大変勉強になりました。今後のためにしっかり記録し、
次に役立てたいと思います。
本当にありがとうございました。
Topic starter
2023年6月8日 21:41
@akira 様
ありがとうございます!!
只今、あきらめかけていましたが、消したはずのCSSがなぜかトップページ内に残っておりました。
その後、ブラウザーのキャッシュを削除したところ、無事にスマホとPCに源暎ラテミンのフォントが表示されました。
本当に本当にありがとうございました。
最後にご質問なのですが、Cocoon設定の下にキャッシュ削除とあり、中に入ると全てのキャッシュ削除という箇所が出てきます。これは削除したほうが良いでしょうか?
Topic starter
2023年6月8日 23:22
@akira 様
上記の質問につきまして再度詳しくサポートいただきまして、誠にありがとうございました。
大変助かりました。心より感謝いたします。
明日以降で結構なのですが、先程のページ内にご注文の流れという緑の見出しがございます。
その部分の見出しフォントだけが源暎ラテミンに変換されないようです。
この件につきまして明日以降、サポートいただければ幸いです。
どうぞよろしくお願いいたします。
ありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。