Webflowサイトでカスタムフォントをアップロードして使用する
スタイルパネルのフォントドロップダウンから、サイトに直接追加できます。Add fonts を選択すると、Site settings > Fontsタブにリダイレクトされます。そこで、独自のカスタムフォントをサイトにアップロードできます。
使用したいフォントがAdobeフォント（Typekit）またはGoogleフォントを介して利用可能な場合、Site settings > Fonts タブの統合から追加できます。
このレッスンで学ぶこと
サイトでカスタムフォントを使用したい場合は、Site settings > Fontsタブを開き、Custom fontsまでスクロールし、フォントファイルをそこにアップロードします。
Webflowサイトにさまざまなフォントファイル形式をアップロードできます。
ほとんどのブラウザでサポート
一部のブラウザでサポート
フォントファイルがアップロードされた後、フォントファミリー名、フォントウェイト、フォントスタイルを編集できます。
フォントファミリー名が正確に一致している場合、各フォントファイルをサイトにアップロードできます。アップロードされたファイルは、デザイナーを再度開いてサイトを再公開すると、デザイナーに表示されます。
カスタムフォント設定はいつでも編集できます。また、アップロードしたフォントを削除することもできます。
フォールバックフォントは、ブラウザとオペレーティングシステム間の互換性を最大限に確保します。サイト訪問者のブラウザがカスタムフォントを読み込めなかった場合、フォールバックフォントに切り替わります。フォールバックフォントは、アップロードしたフォントファミリーごとに自動的に作成されます。
各フォントファミリーのフォールバックフォントを編集し、利用可能なフォントのリストからフォールバックするフォントを選択することができます。
また、フォント表示設定を編集することもできます。これは、ブラウザがすでに保存しているフォントに基づいて、どのようにフォントフェイスを読み込むかを決定するものです。
デザイナーでは、カスタムフォントとフォントウェイトに完全にアクセスできます。必要なフォントを探すには、Style panel > Typography > Font でフォントをブラウズできます。フォント ドロップダウンは、フォントをソース別に分類します（例：Googleフォント、Webフォント、カスタムフォントなど）。また、各ソース内でフォントをアルファベット順に並べます。サイトにアップロードしたフォントはカスタムフォントの下に表示されます。
カスタムフォントをテキスト要素、親要素、またはすべての段落またはすべてのH1に適用できます。
サイトからカスタムフォントを削除するには、そのカスタムフォントのすべてのインスタンスを特定し、サイトからそのカスタムフォントのすべてのインスタンスを削除し、最後に Site settings > Fonts tab > Custom fontsからカスタムフォントを削除する必要があります。
サイト上のカスタムフォントのすべてのインスタンスを特定するには、スタイルマネージャーを開き、見つけたいフォントの名前を入力します。これにより、そのカスタムフォントを使用しているサイトのすべてのクラスとHTMLタグのリストが生成されます。各クラスの隣にある「リスト」アイコンをクリックして、そのクラスを使用している要素とコンポーネントのリストを表示できます。
特定したカスタムフォントを使用しているクラスおよび/またはHTMLタグを特定したら、そのフォントを使用する要素を削除し、スタイルマネージャーで未使用のクラスを削除する方法を実行するか、それらのクラスおよび/またはHTMLタグで使用するフォントを Style panel > Typography > Fontで変更する必要があります。
カスタムフォントをサイトから削除するために、次の手順を実行します。
詳細はこちら: 高度なWebタイポグラフィ
