料金プランを有効化して学習を始めましょう。

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

Webflowサイトでカスタムフォントをアップロードして使用する

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

スタイルパネルのフォントドロップダウンから、サイトに直接追加できます。Add fonts を選択すると、Site settings > Fontsタブにリダイレクトされます。そこで、独自のカスタムフォントをサイトにアップロードできます。

使用したいフォントがAdobeフォント（Typekit）またはGoogleフォントを介して利用可能な場合、Site settings > Fonts タブの統合から追加できます。

お知らせ： カスタムフォントをアップロードするのに、有料のSiteまたはWorkspaceプランは不要です。

このレッスンで学ぶこと

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

サイトでカスタムフォントを使用したい場合は、Site settings > Fontsタブを開き、Custom fontsまでスクロールし、フォントファイルをそこにアップロードします。

重要： フォントのライセンス契約を読み、フォントをサイトで使用する許可を持っていることを確認してからアップロードしてください。

適切なフォント形式を選択する方法

Webflowサイトにさまざまなフォントファイル形式をアップロードできます。

注意： 1つのフォントファイルあたりの最大ファイルサイズは4MBです。

ほとんどのブラウザでサポート

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

注意： すべてのファイル形式をアップロードする必要はありません。ただし、最大のブラウザサポートをカバーするためにさまざまな形式をアップロードできます。 WOFFは最大のブラウザ互換性とファイルサイズが良い形式です。 WOFFまたはWOFF2バージョンのフォントファイルがない場合、オンラインで見つかるフォントコンバーターを使用できます。
重要： WebflowはTTF、OTF、WOFF、およびWOFF2形式の可変フォントをサポートしています。 Webflowは現時点ではEOTおよびSVG形式の可変フォントをサポートしていません。

インストール済みフォントの編集方法

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

ベストプラクティス： フォントの複数のインスタンスをアップロードし、各インスタンスに異なるフォントウェイトとスタイルを選択するか、すべての変種（ウェイト、幅など）を含む可変フォントをアップロードできます。フォントの複数のインスタンスをアップロードする場合は、同じフォントファミリーをすべてのインスタンスで使用することを確認してください。これにより、フォントファミリーがデザイナーで正しくグループ化されます。

フォントファミリー名が正確に一致している場合、各フォントファイルをサイトにアップロードできます。アップロードされたファイルは、デザイナーを再度開いてサイトを再公開すると、デザイナーに表示されます。

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

フォールバックフォントと表示設定の定義方法

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

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

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

プロのアドバイス：フォントの表示設定を入れ替えるように設定すると、システムフォントを使用することで、ページ読み込み時に見えないテキストが点滅するのを防ぐことができます。

デザイナーでフォントをテストする方法

デザイナーでは、カスタムフォントとフォントウェイトに完全にアクセスできます。必要なフォントを探すには、Style panel > Typography > Font でフォントをブラウズできます。フォント ドロップダウンは、フォントをソース別に分類します（例：Googleフォント、Webフォント、カスタムフォントなど）。また、各ソース内でフォントをアルファベット順に並べます。サイトにアップロードしたフォントはカスタムフォントの下に表示されます。

カスタムフォントをテキスト要素、親要素、またはすべての段落またはすべてのH1に適用できます。

サイトからカスタムフォントを削除する方法

サイトからカスタムフォントを削除するには、そのカスタムフォントのすべてのインスタンスを特定し、サイトからそのカスタムフォントのすべてのインスタンスを削除し、最後に Site settings > Fonts tab > Custom fontsからカスタムフォントを削除する必要があります。

重要： カスタムフォントをSite settings > Fonts タブから削除するだけでは、カスタムフォントがサイトのCSSに引き続き表示されます。カスタムフォントのすべてのインスタンスを削除するまで、カスタムフォントはサイトの公開されたCSSに表示され続けます。

サイト上のカスタムフォントのすべてのインスタンスを特定するには、スタイルマネージャーを開き、見つけたいフォントの名前を入力します。これにより、そのカスタムフォントを使用しているサイトのすべてのクラスとHTMLタグのリストが生成されます。各クラスの隣にある「リスト」アイコンをクリックして、そのクラスを使用している要素とコンポーネントのリストを表示できます。

特定したカスタムフォントを使用しているクラスおよび/またはHTMLタグを特定したら、そのフォントを使用する要素を削除し、スタイルマネージャーで未使用のクラスを削除する方法を実行するか、それらのクラスおよび/またはHTMLタグで使用するフォントを Style panel > Typography > Fontで変更する必要があります。

カスタムフォントをサイトから削除するために、次の手順を実行します。

  1. Site settings > Fonts tab > Custom fonts タブに移動します。
  2. サイトから削除したいカスタムフォントの横にある削除をクリックします。
  3. 変更を有効にするために、サイトを再公開します。

詳細はこちら: 高度なWebタイポグラフィ