サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年12月15日 15:56
コクーンの既定のフォントは使わずに、以下のサイトを参考に、
https://www.grayblack.net/entry/cocoon-adobe-fonts
アドビフォントで「FOT- 筑紫A オールド明朝」という日本語フォントを入れました。
ちなみに、スクリプト部分には
<script>
(function(d) {
var config = {
kitId: 'oek4tjv',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
というコードを入れました。
追加CSSには、
body #container {
font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
font-weight: 300;
font-style: normal;
}
というコードを入れました。
日本語のフォントはそのままに、英字部分だけをOptima Regularというフォントに変更する方法はありますでしょうか。
また、厚かましいお願いですが、プログラミングの勉強をしたことがない初心者なので、分かりやすく説明していただけると嬉しいです。
以下、環境情報です。
サイト名：心のふるさと
サイトURL： https://spiritual-homes.net
ホームURL： https://spiritual-homes.net
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
WordPressバージョン：6.4.2
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.7,en;q=0.3
2023年12月15日 20:42
人に懇切丁寧に教えられるほどは知識はありませんし、今回初めてやってみました。
そのため、こんな感じでやってみましたということだけ書かせていただきます。
また、既にカスタマイズでフォントを適用済のようですが、そこまで私は試していません。
Cocoon標準のフォントが適用されている状態で、英字に「Optima Regular」を適用してみたという感じです。
Cocoon設定で以下のようにしています。
例えばサイドバーの「最近の投稿」の表示で、英字日本語が混ざっているものは以下のような表示です。
実際には「メイリオ」が適用されているみたいです。
私の環境には、「Optima Regular」というフォントはありませんでした。
そのため、事前準備として・・・。
- このフォントを検索して見つけてダウンロード
- woff2に変換（ダウンロードしたものが、TrueTypeフォントだったので）
- 子テーマ配下「fonts」フォルダを作り、アップロード
上記のようなことをしました。
そして、調べてみたところ「unicode-range」というもので、文字範囲が指定できる感じでした。
unicode-range
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/unicode-range
そこで、子テーマのスタイルシートに、フォントを以下のように定義しました。
@font-face {
font-family: Optima-Regular;
font-style: normal;
src: url('./fonts/Optima-Regular/Optima-Regular.woff2') format('woff2');
unicode-range: U+0021-007F;
}
英字だけでなく、一部記号も範囲内になっていると思いますが、お試しということでとりあえず上記の指定にしてあります。
（詳しくは「Unicode」の範囲を調べていただければと）
そして、とりあえずサイト全体に「Optima Regular」を適用するために、以下を追加しました。
* {
font-family: Optima-Regular;
}
上記のような指定をしてみたところ、先程の「最近の投稿」の表示は以下のようになりました。
10文字は「Optima Regular」が適用されたようなので、上手くいったのかな・・・という感じはします。
あくまでも、やってみましたというものでしかありません。
ご参考程度のものです。
ご参考程度のものです。
わいひら reacted
2023年12月15日 22:35
先程はfont-familyを1つしか指定しませんでしたけれど。
優先順位をつけて書いておくべきなんだと思います。
例えば、今回の私のケースであれば、以下みたいな感じで。
* {
font-family: Optima-Regular, Meiryo, sans-serif;
}
わいひら reacted
2023年12月16日 08:27
ふと思いましたが。
先程は「unicode-range」を使いましたけれど。
サブセット化しておくのも、方法かなと思いました。（必要な文字だけを抽出して（今回であれば英字）、新たなフォントファイルを作る）
わいひら reacted
Topic starter
2023年12月29日 10:54
丁寧に返信してくださって、ありがとうございます。
本当に申し訳ないのですが、諸々の事情からフォントを変更する必要がなくなりました。もし他の方で、この方法で成功したよという方がいらっしゃれば、解決済みにしようかと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。