スタイルパネルの「フォント」ドロップダウンから、プロジェクトに直接、フォントを追加することができます。フォントを追加]を選択すると、[プロジェクト設定] > [フォント設定]が表示されます。そこで、どのプロジェクトでも独自のカスタムフォントをアップロードして使用することができます。

使用したいフォントがAdobeフォント（Typekit）やGoogleフォントで利用できる場合は、「プロジェクト設定」>「フォント」にある統合機能を通じて追加できます。

知っておくと便利なこと カスタムフォントをアップロードするには、有料プランは必要ありません。

このレッスンでは

  1. カスタムフォントをアップロードする
  2. 正しいフォントフォーマットを選択する
  3. インストールされたフォントの編集
  4. フォールバックフォントの定義　

1. カスタムフォントのアップロード

プロジェクトでカスタムフォントを使用する場合は、プロジェクト設定 > フォント > カスタムフォントを開き、フォントファイルをアップロードしてください。

Step one on the top, click on the Fonts tab in the projects settings page. Step two on the bottom, click on the highlighted blue upload button to select the custom fonts you'd like to upload.
重要：フォントをアップロードする前に、フォントのライセンス契約を読み、あなたのサイトでそのフォントを使用する許可があることを確認してください。

2. 正しいフォント形式の選択

ウェブフロープロジェクトでは、様々なフォントファイル形式をアップロードすることができます。1つのフォントファイルにつき最大2MBのファイルサイズをアップロードできます。


全てのブラウザでサポート↓

WOFF - Web Open Font Format 

TTF/OTF - TrueType FontおよびOpenType Font

一部のブラウザでサポート↓

WOFF 2.0 - Web Open Font Format 

EOT - Embedded OpenType 
SVG - SVG フォント 

3. インストールしたフォントの編集

フォントファイルのアップロード後、フォントファミリ名、フォントウェイト、フォントスタイルを編集することができます。


フォントの複数のインスタンスをアップロードし、各インスタンスに異なるフォントウェイトとスタイルを選択することができます。

ただし、同じフォントのすべてのインスタンスに同じフォントファミリーを使用することを確認してください。こうすることで、Designer上でフォントファミリーが適切にグループ化されます。

フォントファミリーの名前が正しく、一致したら、各フォントファイルをプロジェクトにアップロードできます。Designer を再度開くと、アップロードされたフォントが表示されます。


Step one, select the font files from the finder window and click on the blue open button.
Step two, confirm the upload by clicking on the green Upload font file button on the right of the Custom fonts section.

カスタムフォントの設定はいつでも編集可能です。また、アップロードされたフォントを削除することもできます。

The installed fonts section includes the name of the fonts uploaded and font descriptions under the name. To the right of the names, there is an edit and delete button. These buttons are highlighted.

4. フォールバックフォントの定義

フォールバックフォントは、ブラウザとオペレーティングシステム間の互換性を最大限に確保します。ユーザーのブラウザがカスタムフォントを読み込めなかった場合、フォールバックフォントに切り替わります。フォールバックフォントは、アップロードしたフォントファミリごとに自動的に作成されます。


The fallbacks for installed fonts section includes the name of the font family with the fall back to a sans-serif font, an edit button and a description of what is the use for fallback fonts.

フォントファミリーごとにフォールバックフォントを編集し、利用可能なフォントの一覧からフォールバックするフォントを選択することができます。

Step one on the left, select the dropdown menu to select which font fallback you want to use. Step two on the right, Verdana has been selected as the fallback font for Graphik.

フォント表示設定を編集することができます。この設定は、ブラウザがすでに保存しているフォントフェイスに基づいて、どのように読み込むかを決定します。

Step one on the top, the font display dropdown menu is highlighted in the installed fonts section. Step two on the bottom, select between the options auto, block, swap, fallback and optional in the font display drop down menu.


フォント表示設定をスワップに設定すると、システムフォントを使用して、ページ読み込み時に見えないテキストが点滅するのを防ぐことができます。

デザイナー機能でのフォントのテスト

デザイナー機能では、カスタムフォントとフォントウエイトに完全にアクセスできます。スタイルパネル（S）> タイポグラフィセクションで必要なフォントを選択します。フォントのリストはアルファベット順に表示されます。


カスタムフォントは、テキスト要素、親要素、HTMLタグのいずれにも適用でき、すべての段落やすべてのH1に影響を与えることができます。

すべての記事を見る