SearchフロントエンドテーマにWebフォントを追加する – Yext Help

ウェブフォントは、ユーザーのオペレーティングシステムにインストールされていないフォントで、ウェブ上でホストされ、使用するためにブラウザによってダウンロードされます。これらは、フォントファイル（URLまたはファイルパス）として提供すれば、任意のフォントを柔軟に使用できます。これらのフォントは多くの場合ライセンスされており、お客様はサイトでフォントを使用する権利を購入する必要があります。

Searchに追加できるフォントは2種類あります。

フォントサービスプロバイダーによってホストされるフォント、Google Fonts や Adobe Fonts などは無料で、ライセンスは必要ありません。
1. ホスティングプロバイダーから、フォントアセットとフォントフェース宣言の両方を含むコードスニペットを入手します。これは以下のようなスタイルシートの形式になります。hrefは外部フォントを参照するコンポーネントです。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&display=swap">

セルフホストフォント - 通常はお客様独自のフォント（該当する場合）。
1. これらは、Searchにアップロードするフォントファイルです。
2. 受け入れ可能なformatタイプは以下の通りです。
  - WOFF（Web Open Font Format）
    - これらは、インターネット接続が不安定な場合でも配信を改善するために圧縮されており、一般的にさまざまなブラウザでサポートされているため、推奨されます。
  - WOFF2
  - TTF（TrueType）
  - OTF（オープンタイプ）
  - EOT（埋め込みオープンタイプ）
  - SVG（スケーラブル・ベクター・グラフィックス）

ウェブフォントをサイトに追加する方法

ナビゲーションバーにある[Pages]をクリックし、目的のサイトをクリックします。
[コードエディタを表示] ボタンをクリックします。
マスターブランチにカーソルを合わせ、表示される鉛筆アイコン（）をクリックします。
フォントをコードエディターに追加します。このプロセスは、フォントのホスティング方法により異なります。以下のそれぞれの手順に従ってください。
- フォントサービスプロバイダーによってホストされるフォント
  1. layoutsフォルダをクリックします。
  2. headincludes.hbsファイルをクリックします。
  3. 目的のフォントスクリプトをファイルに追加します。
- セルフホストされたフォント
  1. staticフォルダをクリックします。
  2. assetsフォルダをクリックしてください。
  3. [フォント] フォルダにポインタを重ね、表示される3つのドットをクリックし、ドロップダウンメニューから [ファイルを追加] を選択します。ダイアログボックスが表示されます。
  4. ドロップダウンメニューで「既存のファイルをアップロード」を選択してください。
  5. [ファイルの選択（Choose File）]をクリックし、コンピューターからファイルを選択します。次に[ファイルを追加（Add File）]をクリックします。
    - 追加したいファイルが複数ある場合は、手順cからeを繰り返します。フォントのバリエーション（例: 標準、太字、斜体）ごとにファイルをアップロードする必要があることにご注意ください。
  6. staticフォルダの下にあるscssフォルダをクリックします。
  7. fonts.scssファイルをクリックします。
  8. 希望するフォントフェイス宣言をファイルの先頭に追加します。
    - アップロードする各バリエーション/ファイルに対して、フォントフェイス宣言を追加する必要があります。この場合、標準、太字、斜体です。
    - srcは、fontsフォルダにアップロードしたばかりのファイルへのファイルパスを指します。

@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-regular-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-bold-webfont.woff') format("woff");
  font-weight: $font-weight-bold;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-italic-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: italic;
}

新しいフォントをSearchエクスペリエンスに適用します。詳細については、ヘルプ記事「フロントエンドテーマのフォントを変更する」をご覧ください。