フォントはウェブサイトのブランディングにおいて重要な要素です。Searchエクスペリエンスでのテキストのレンダリング方法を制御します。Searchはシステムで利用可能なフォントをデフォルトで使用しますが、CSSを通じてエクスペリエンスのフォントを更新すれば、ブランドのフォントにより近づけることができます。
すべてのオペレーティングシステムでフォントが自動的にダウンロードされるわけではないため、ブラウザがコンピュータシステムで利用可能なフォントではなく、サイト上のフォントにアクセスできるようにする方法が必要となります。この方法を学ぶには、ヘルプ記事「Searchフロントエンドのテーマにウェブフォントを追加する」を参照して指示に従ってから、以下の手順を実行してください。
フォントおよびフォントプロパティの詳細については、「フォント」のリファレンスドキュメントをご覧ください。
Searchでフォントを使用または更新するには:
- ナビゲーションバーにある[Pages]をクリックし、目的のサイトをクリックします。
- [コードエディタを表示] ボタンをクリックします。
-
マスターブランチにカーソルを合わせ、表示される鉛筆アイコン（
）をクリックします。
-
staticフォルダをクリックします。 -
scssフォルダをクリックします。 - このプロセスは、すべての検索コンポーネントのフォントを設定するか、特定のクラスをターゲットにするかによって異なります。以下のそれぞれの手順に従います。
- すべての検索コンポーネント
-
fonts.scssファイルをクリックします。 -
--yxt-font-family変数の先頭にフォント名を追加します。
--yxt-font-family: "Roboto Mono", Arial, Helvetica, sans-serif;
-
- ターゲットとする特定クラス
-
answers.scssファイルをクリックします。 - ターゲットとするクラスには
font-familyを使用し、追加したいウェブフォント名を含めます。
.yxt-SearchBar-title
{
font-family: "Roboto Mono", Arial, Helvetica, sans-serif;
} -
- すべての検索コンポーネント