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カスタマイズ依頼

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

webfont を適用する最善の方法が...
 
共有:
通知
すべてクリア

[解決済] webfont を適用する最善の方法が知りたいです。

6 投稿
3 ユーザー
3 Reactions
289 表示
kak007
(@kak007)
Trusted Member Registered
結合: 1年前
投稿: 61
トピックスターター  

こんにちは。しきりに迷惑をかけて申し訳ありません。

私が私のブログにフォントを適用させた方法は、追加cssに次のようなコードを追加しました。

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

*{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}

ところが、こうしたことが私のブログの速度を落としているのではないかという気がずっと漂っています。

cocoon themeにある既存のフォントは当然ハングル可読性が良くありません。 日本語のthemeを私が無理に使ったからです。

私のブログに上記のフォントを適用する最良の方法は何か知りたいです。 今現在のように使うのが一番でしょうか?

長い文章を読んでくださってありがとうございます。

 

stepslow.com


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

Google のエンジニアさんが書いた記事が参考になると思います。韓国語の翻訳ページがあります。

フォントに関するおすすめの方法

Web フォントの最適な読み込みは、サイトによって異なります。また、読み込むフォントによっても最適な方法は異なります。

ただ、CSS の @import より HTML の <link> での読み込みが適切なケースが多いです。<link> で読み込む場合は、子テーマ cocoon-child の tmp-user/head-insert.php に <link> を書きます。

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />

この <link> は、Pretendard の説明を参考にしました。

https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md


Google 엔지니어가 작성한 기사가 도움이 될 것입니다. 한국어 번역 페이지가 있습니다.

글꼴 권장사항

웹 글꼴의 최적 로드는 사이트에 따라 다릅니다. 또, 읽어들이는 폰트에 따라서도 최적의 방법은 다릅니다.

다만, CSS 의 @import 보다 HTML 의 <link> 로의 로드가 적절한 경우가 많습니다. <link> 로 읽어들이는 경우는, 아이 테마 cocoon-child 의 tmp-user/head-insert.php 에 <link> 를 씁니다.

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />

이 <link>는 Pretendard의 설명을 참조했습니다.

https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md

この投稿は1年前ずつAkiraに変更されました

   
わいひら reacted
kak007
(@kak007)
Trusted Member Registered
結合: 1年前
投稿: 61
トピックスターター  

詳しいお返事ありがとうございます。 おかげで頭の片隅にずっと疑問に残っていた問題がきれいに解決されたようです。

それでは追加css部分で

*{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}

この部分は残しておけばいいんですか?
それともこの部分もtmp-user/head-insert.phpに書きましょうか?

** 韓国語の翻訳まで本当にありがとうございます。 しかし、もっと迷惑をかけているようで申し訳ありません。

この投稿は1年前 2回ずつkak007に変更されました

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

@kak007 さん

そのCSSは、そのまま残します。

* より body がいいかもしれません。

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

   
わいひら reacted
kak007
(@kak007)
Trusted Member Registered
結合: 1年前
投稿: 61
トピックスターター  

貴重な時間を私に使っていただき、誠にありがとうございます。
おかげで気になっていたすべての問題が解決されました。

もし「解決完了」ボタンがチェックされていない場合はお願いします。 現在、ウェブページを丸ごと翻訳しているので、解決済みなのか、できていないのか、いつも紛らわしいです。
こんなことまでご迷惑をおかけして申し訳ありません。 そしていつもありがたくcocoon themeを利用しています。

 

ここ韓国は今年の冬が暖かい方のようです。日本はどうかわからないですね。健康に気をつけて、年末を楽しんでください。

 

この投稿は1年前ずつkak007に変更されました

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17372
 

Cocoonは韓国の方にも使っていただけているようなので、もしおすすめのフォントセットがありましたら「Cocoon設定」の「サイトフォント設定」のオプションとして追加いたします。
もしあったらいいなというフォントセットがありましたら、要望フォーラムで書き込んでいただければ幸いです。

---------
Cocoon이 한국 분들께도 사용하실 수 있도록, 추천하는 폰트 세트가 있으면 'Cocoon 설정'의 '사이트 폰트 설정' 옵션에 추가하겠습니다. 원하시는 폰트 세트가 있으시면 요청 포럼에 글을 남겨주시면 감사하겠습니다.


   
共有:

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

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

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

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

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

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

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

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