フォントを追加して選択する
ウェブサイトエディターには、プロジェクトに簡単に追加して使用できる様々なフォントが用意されています。この記事では、ウェブサイトにフォントを追加したり、カスタマイズしたり、独自のフォントをアップロードしたりする方法をご紹介します。
ウェブサイトにフォントを追加する
Section titled “ウェブサイトにフォントを追加する”ウェブサイト上のフォントを管理するには、次の手順に従ってエディターでフォント マネージャーを開きます。
- 右上の 「詳細」 をクリックします
- メニュー項目 「フォント」 を選択します
画面右側にフォントマネージャーが開きます。「選択されたフォント」にはプロジェクトに既に割り当てられているフォントが表示され、「利用可能なフォント」をクリックすると、サンプルテキストを使ってプレビューできる追加のフォントも表示されます。
重要：ウェブサイト上のGoogle Fontsはプロキシ経由で実行されており、IPアドレスだけでなく、その他の識別ヘッダー（言語、ユーザーエージェント、リファラーなど）も削除されます。これには、フォントマネージャのネイティブ機能だけでなく、CSS（@import）とHTML（ <link>）への手動統合も含まれます。つまり、フォントはGoogle API経由で直接提供されるのではなく、Google Fontsを通じて提供されます。 フォントマネージャーでサンプルテキストを直接変更すれば、希望するテキストがこのフォントでどのように表示されるか、素早く簡単に確認できます。サンプルテキスト「機敏な茶色のキツネがのろまな犬を飛び越える」をクリックし、希望するテキストに置き換えてください。すべてのフォントで新しいサンプルテキストをプレビューしたい場合は、「テキストをすべてのプレビューにコピー」 というボタンをクリックしてください。
フォントを選択したら、右側のプラス記号をクリックすると、そのフォントがプロジェクトに追加されます。
選択したフォントが上部に表示され、プロジェクトで使用できるようになります。通常のテキスト（デフォルト）と見出し（見出し）のデフォルトフォントを、それぞれのボックスにチェックを入れることで設定できます。
プロジェクトに追加したフォントは、設定アイコンをクリックすることでカスタマイズできます。これにより、フォントの外観に関する詳細なオプションが開きます。テキスト要素では、ここでチェックボックスをオンにして選択したフォントスタイルのみが有効になります。
読み込み時間を可能な限り短縮するため、フォントを含め、スクリプトとファイルの使用量と読み込み数を可能な限り少なくするよう努めています。そのため、フォントはプロジェクトに個別に追加する必要があります。使用していないフォントは、フォントの右側にあるゴミ箱アイコンをクリックしてプロジェクトから削除することをお勧めします。フォントスタイルについても同様です。ウェブサイトで実際に使用するスタイルのみを選択してください。
フォントをカスタマイズする
Section titled “フォントをカスタマイズする”もちろん、各フォントには詳細な設定が可能です。これらの設定にアクセスして変更するには、 上部ナビゲーションの 「デザイン」 をクリックするだけで、 「テキスト」 タブが開きます。ここで、ウェブサイト全体のデフォルトとして適用されるテキストと見出しのグローバルフォントオプションを調整できます。上部ナビゲーションのビューポートを調整することで、タブレットとモバイルのフォントサイズも定義できます。
フォントをアップロード
Section titled “フォントをアップロード”「使用可能なフォント」にリストされていないフォントを使用する場合は、 「フォントのアップロード」 をクリックし、「ファイル」から該当するフォント ファイルを選択するか、コンピューターからファイルをアップロードして、独自のフォントをアップロードできます。
WOFFまたはWOFF2形式の使用をお勧めします。これらは最新のブラウザでの使用に最適化されているためです。別の形式しか利用できない場合は、Font Squirrel Webfont Generatorなどのオンラインツールを使用して、WOFFを含むWebフォント形式に変換できます。ただし、一般的には.ttf、.eot、.svg形式もサポートされています。
一部のフォントはライセンスがないと使用できない場合がありますので、特定のフォントの使用が許可されているかどうか、また使用にどのような条件が適用されるかを事前に確認することをお勧めします。
フォントを選択
Section titled “フォントを選択”ウェブサイトにフォントを追加すると、他のプロパティでフォントが設定されていない限り、テキストを表示するすべての要素で使用できるようになります。テキストボックスの編集モードでは、「A」アイコンをクリックすると表示されるドロップダウンからフォントを選択できます。詳細は以下の画像をご覧ください。
