メインコンテンツにスキップ

Help Centerでカスタムフォントを使用する方法

Help Centerをブランドスタイルに合わせるために、独自のカスタムフォントをアップロードして使用する方法。

対応者:Beth-Ann Sher

Help Centerのカスタムフォント機能を使うと、ブランドスタイルに合わせて独自のフォントファイルをアップロードできます。

対応ファイル形式:

TTF、OTF、EOT、WOFF、WOFF2。

重要な用語:

  • フォントファミリー - デザインは似ているが、ウェイト、幅、スタイルなどの属性が異なるフォントのセットです。例えば、Light、Regular、Boldのウェイトがあり、それぞれにイタリック版がある場合があります。

  • イタリック版 - 文字が右に傾いたスタイルです。イタリックフォントは強調、タイトル、引用文や出典を本文から区別するためによく使われます。

  • フォントウェイト - 書体の文字の太さを指します。一般的なウェイトにはLight、Regular、Medium、Semi Bold、Bold、Extra Boldがあります。

Google Fonts(プリロード済み)を使用する場合、これらの設定は自動的に適用され、追加の手順は不要です。しかし、カスタムフォントを使用する場合は、各フォントウェイトごとに複数のフォントファイルをアップロードし、すべての設定が正しいことを確認する必要があります(例外はVariable fontsのみです)。

始めましょう

カスタムフォントをアップロードする

設定 > Help Center > 設定とスタイルに移動し、スタイリングタブを開いてから共有要素をクリックします。

下にスクロールしてカスタムフォントの管理を選択します。

開始するにはフォントをアップロードをクリックします。

任意のフォントをアップロードする場合は、そのフォントの使用許可があることを確認し、Help Centerで使用する前に適用されるライセンス条件を確認してください。

フォントウェイト

Help Centerのすべてのテキスト要素が正しく表示されるように、以下のフォントウェイトをアップロードしてください:

  • Regular

  • Medium

  • Semi Bold

  • Bold、そして

  • それぞれのイタリック。

マルチセレクト機能により、usersは複数のフォントファイルを一度にアップロードできます。

Help Centerでは、Regular、Medium、Semi Bold、Boldのフォントウェイトを使用します。チームメンバーが特定のウェイトのアップロードを忘れたり、フォントファミリーに特定のウェイト/スタイルのフォントファイルがない場合、ブラウザは最も近いものを選んでテキストを表示します。例えば、MediumとBoldだけをアップロードしてRegularを忘れた場合、MediumがすべてのRegularスタイルの代わりになります。

同じプロパティの重複したフォントファイルがないことを確認してください。ミスがあると、「このフォントファミリーには同じウェイトとスタイルの別のフォントファイルがあります」というバナーが表示されます。バナーを無視して設定を保存すると、フォントファイルのいずれかがランダムに選ばれます。

Variable fonts

複数のフォントウェイトの代わりにVariable fontをアップロードできます。フォントの外観を調整するオプションはありませんが、ブラウザが必要に応じてフォントウェイトを自動調整します。

イタリックスタイル用に別のVariable fontファイルをアップロードする必要があります。

Variable fontをアップロードするには、Variableとラベル付けされたフォントファイルを選択します。アップロード後、フォントウェイト設定で「Variable」オプションを選択してください。

フォント設定を確認する

フォントファイルをアップロードすると、それぞれのファイルに設定を調整するためのアコーディオンが表示されます。

アコーディオンの名前はファイル情報から自動生成され、設定を調整すると自動的に更新されます。

デフォルトでは、これらのアコーディオンはファイルから直接取得した情報を使用しますが、この情報が誤っている場合があります。すべてのフォントが正しく表示されるように、この情報を確認し、必要に応じて更新してください。

確認・更新すべき事項:

  • 同じフォントファミリーに属するすべてのフォントファイルは、同じフォントファミリー名でなければなりません。

  • すべてのフォントファイルは正しいフォントウェイトを指している必要があります。例えば、Rubik Regularをアップロードした場合、フォントウェイト設定で「Regular (400)」が選択されていることを確認してください。

  • すべてのフォントファイルは正しいフォントスタイルも指している必要があります。例えば、Rubik Regularをアップロードした場合、スタイル設定で「Normal」が選択されていることを確認してください。

カスタムフォントを選択する

すべてのフォントファイルをアップロードして確認したら、スタイリング設定に戻ります。

これで「プライマリフォント」または「セカンダリフォント」のドロップダウンメニューからカスタムフォントを選択できるようになります。

注意:

  • イタリックフォントは記事本文でのみ使用されます。Help Centerでイタリックフォントをプレビューするには、イタリックテキストのサンプルがある記事ページのプレビューをお勧めします。

  • すべてのカスタムフォントファイルを削除すると、フォントはシステムデフォルトに戻ります。

  • カスタムフォントがウェブページで読み込まれている間、Help Centerではシステムデフォルトフォントが表示されます。数秒かかる場合があります。

  • フォントファイルを一括削除するオプションはなく、1つずつ削除する必要があります。


トラブルシューティング

フォントが期待通りに表示されない

例:通常のテキストが太字になったり、イタリックが不適切に使われている場合。

割り当てたウェイト/スタイルの組み合わせに対応するフォントファイルが正しいか確認してください。通常、フォントファイル名にはフォントファミリー名とバリエーションが含まれています。例えば、誤設定されたフォントバリエーションの例:

このファイルはMedium/Condensed/Italic用ですが、誤ってRegular/Normalに割り当てられています。

カスタムフォントで2つのフォントファミリーが表示されるべきところ1つしかない場合

これは2つのフォントファイルをアップロードし、異なるフォントファミリー名を使っていることを意味します。両方に同じフォントファミリー名を使ってください。


よくある質問

記事内のテキストの色を編集できますか?

いいえ、記事内のテキストの色を編集することはできませんが、重要な情報を強調するために色付きのcalloutsを使用できます。追加の書式設定オプションについては、Product Wishlistでリクエストに投票してください。ここに欲しい機能のコメントもぜひ追加してください。

こちらの回答で解決しましたか?