ローカルフォントをサイトに追加しようとしていました。テーマのCSSファイルに以下のように記述しました。
@font-face {
font-display: swap; /* 他のオプションについては https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display を参照してください。 */
font-family: 'Montserrat';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/montserrat-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
HTMLファイルには以下のように記述しました。
<link rel="preload" href="/fonts/montserrat-v26-latin-italic.woff2 " as="font" type="font/woff2" crossorigin="">
その後、保存してサイトをリロードし、ページソースを表示して /fonts/montserrat-v26-latin-italic.woff2 のURLをクリックしたところ、以下のページに遷移しました。
https://forums.mysite.com/fonts/montserrat-v26-latin-italic.woff2
「404 Not Found」というNginxのエラーページが表示されました。そこで、「ああ、そういえばVPSのDiscourseディレクトリにfontsフォルダがないな」と思いました。テーマのfontsフォルダから読み込まれないのが不思議でした。そこで、/var/discourse/shared/standalone/ に「fonts」フォルダを追加し、そこにフォントファイルを入れました。ブラウザページを再度リロードしても、まだ404エラーが表示されます。Discourseにこのようなフォルダを単純に追加できるのでしょうか、それともサーバーを再起動しないと反映されないのでしょうか、それとも他に何か必要なことがあるのでしょうか?
bryce
(Bryce Huhtala)
2024 年 4 月 6 日午後 6:18
2
ディレクトリの追加についてはよくわかりませんが、テーマでフォントファイルを使用することに関しては、試すことができる組み込みの方法があります。テーマファイルを直接編集している場合は、フォントをテーマの /assets ディレクトリに追加し、about.json に次のようにエントリを追加できます。
{
// その他のプロパティ
"assets" : {
"my-font-identifier": "assets/my-font-file.woff2",
}
}
次に、@font-face で src: url($my-font-indentifier); を使用して参照できます。
設定インターフェイスのテーマエディターを使用しているだけであれば、アップロードセクションに追加し、SCSS var name フィールドに使用したい識別子を入力してから、SCSS で同じように参照できると思います。
「いいね!」 5
では、フォントごとにアセットコードは以下のようになりますか?
"assets": {
"montserrat-reg": "assets/montserrat-v26-latin-regular.woff2",
"montserrat-ita": "assets/montserrat-v26-latin-italic.woff2"
},
編集:うまくいきました。フォントへの直接の /assets/ URLはまだ404を表示しますが、フォントはページで機能しているので、
Don
2024 年 4 月 6 日午後 6:55
4
管理サイトの設定で、フォントをMontserratに変更できます。
ベースフォント
見出しフォント
コアに含まれていないがGoogle Fontsにあるフォントを追加したい場合は、このテーマコンポーネントを使用できます。
「いいね!」 5
ええ、モンセラートは別のページ用です。でも、ありがとうございます!
Googleフォントの問題は、人々がほとんど使用しない200文字以上を読み込むことでページが遅くなることです。
「いいね!」 1
Jagster
(Jakke Lehtonen)
2024 年 4 月 6 日午後 9:58
6
45thj5ej:
ページが遅くなる
いいえ、そうではありません。必要なウェイトのみを使用し、最大3〜4つのフォントセットを使用する場合(本来そうすべきです)は、そうなりません。
「いいね!」 2
これについて質問があります。Discourseサイトのフォーラムページでソースを表示し、「font」を検索すると、たくさん表示されます。これらは、セットアップウィザードで1〜2個しか選択しなくても、すべて読み込まれていますか?もしそうなら、選択したものだけを読み込みたいです。
system
(system)
クローズされました:
2024 年 5 月 6 日午後 10:01
8
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.