アセットリポジトリ経由でカスタムフォントをテーマに追加する

こんにちは。
テーマにカスタムフォントを追加しようとしていますが、うまくいきません。きっと何か間違っているのでしょうが、どこが間違っているのか見つけられません。

  • GitHub経由でインストールした独自のテーマを開発しています。
  • アセットリポジトリに、Googleフォントではないフォントをアップロードしました。

  • about.jsonにファイルをインポートしました。

Capture d’écran 2023-04-06 à 11.09.51

  • scssリポジトリにフォントファミリーを作成しました。

format(‘woff2’)を追加してみましたが、それもうまくいきませんでした。

  • そして、以下のようにしました。

Capture d’écran 2023-04-06 à 11.07.22

うまくいきません… 何かアイデアはありますか?

「いいね!」 2

何が問題なのかよくわかりません。テーマやコンポーネントにアセット(画像、フォントなど)を含めるを確認してみてください。お役に立てなければすみません。

「いいね!」 2

Hi @Joart

単純化しすぎているかもしれませんが、about.json のスニペットでは、フォントへのパスが assets フォルダを指していますが、CSS ではパスが fonts フォルダを指していることに気づきました。CSS のソースパスは正しいですか?

「いいね!」 5

これは良い指摘ですが、CSSでこのようにパスを使用するべきではありません。アセット名を変数として参照する必要があります。

@font-face {
   font-family: supply-light;
   src: url($supply-light);
}

これは Include assets (e.g. images, fonts) in themes and components で説明されています。

「いいね!」 8

でも、うまくいきませんでした :frowning:

なぜなのか推測するのは難しいです。テーマをGitHubにアップロードしてリンクを貼るか、コードをここに投稿することができます。

@awesomerobotが提供した例に従いましたか

「いいね!」 1

Hi @Joart

この問題を、比較的新しいDiscourseインスタンスで少し試してみましたが、最初に試したフォントでいくつか問題が発生しました。無料のオンラインコンバーターを使用して.woff2に変換しましたが、うまく機能しなかったようです。

.otfフォント、次に評判の良いコンバーターで変換された別の.woff2フォントを試したところ、@pfaffman@awesomerobot がリンクしたガイドの手順でカスタムフォントを追加することができました。

実際には、Add Uploadモーダルを使用してファイルをアップロードし、テーマまたはコンポーネントに例のSCSSの@font-faceとbodyの行を追加するだけの2つのステップでした。

詳細を教えていただき、コードとフォントを共有していただければ、この問題を解決するお手伝いができます。

「いいね!」 3

はい、ありがとうございます!ttf形式で試したところ、うまくいきました!

「いいね!」 1

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.