お問い合わせ

何を探していますか？

によるユアン・マック
2024年4月15日

カスタマイズされた書体をインポートする

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

追加の書体をサイトに直接組み込むオプションがあります。 タイポグラフィ デザインパネルのドロップダウンから選択します。 書体をインポートする そして、あなたは サイト設定 > タイポグラフィ セクションで、独自のカスタム書体をサイトにアップロードできます。

使用したい書体がAdobe書体（Typekit）またはGoogle書体からアクセス可能な場合は、統合を介して組み込むことができます。 サイト設定 > タイポグラフィ セクションを参照してください。Adobe 書体の統合について詳しくは、こちらをご覧ください。 

知っておくと役立つこと: パーソナライズされた書体をインポートするために、有料のサイト プランまたはワークスペース プランは必要ありません。

このガイドでは、以下の内容について説明します。

  1. パーソナライズされた書体をインポートする方法
  2. 適切な書体フォーマットを選択する方法
  3. インストールされた書体を変更する方法
  4. 代替書体と表示設定を指定する方法
  5. デザイナーで書体を評価する方法
  6. サイトからパーソナライズされた書体を削除する方法

パーソナライズされた書体をインポートする方法

サイトでパーソナライズされた書体を使用したい場合は、 サイト設定 > タイポグラフィ セクションを下にスクロールして パーソナライズされた書体、そこに書体ファイルをアップロードします。

サイト設定の「フォント」タブ内の「カスタム フォント」セクションでは、サイトにカスタム フォントをアップロードできます。

重要な： アップロードする前に、書体のライセンス契約を確認し、サイトで書体を使用する権限があることを確認してください。 書体のライセンスと使用方法について詳しく知る.

相性の良い書体をお探しですか? 詳しくはこちら: 無料（またはほぼ無料）の書体が見つかる 9 つの場所

適切な書体フォーマットを選択する方法

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

知っておくと役立つこと: 1 つの書体ファイルにつき最大 4MB のファイルサイズをアップロードできます。

ほとんどのブラウザに対応

いくつかのブラウザでサポートされています

知っておくと役立つこと: すべてのファイル形式をアップロードする必要はありません。ただし、最大限のブラウザ サポートを網羅するために、複数の異なる形式をアップロードできます。WOFF は、包括的なブラウザ互換性と適切なファイル サイズを備えた堅牢な形式です。書体ファイルの WOFF または WOFF2 バージョンがない場合は、オンラインで利用できる書体コンバーターを利用できます。

重要な： Webflow は、TTF、OTF、WOFF、WOFF2 形式の可変書体に対応しています。ただし、Webflow は現在、EOT および SVG 形式の可変書体をサポートしていません。

インストールされた書体を変更する方法

アップロードされた書体ファイルを投稿すると、書体タイプ名、書体の太さ、書体スタイルを変更できます。

主なアプローチ: 書体のさまざまなバージョンをアップロードして、異なる 書体の太さ そして スタイル 各バージョンごとに異なるフォントをインポートするか、フォントファミリーの範囲内ですべてのバリエーション（太さ、幅など）を網羅する可変フォントをインポートすることができます。フォントのさまざまなバージョンをアップロードする場合は、同じフォントを使用するようにしてください。 書体ファミリー 同じ書体のすべてのバージョンに適用されます。このアクションにより、Designer で書体ファミリが正しくグループ化されます。

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

「サイト設定 > フォントタブ > カスタムフォント」で、カスタムフォントの横にある「フォントファイルのアップロード」ボタンが強調表示されます。

いつでも 修正する パーソナライズされた書体設定。また、 消去する アップロードされた書体。

インストールされているカスタム フォントの横には、「編集」ボタンと「削除」ボタンが強調表示されます。

代替書体と表示設定を定義する方法

代替書体は、ブラウザとオペレーティング システム間の包括的な互換性を保証します。サイト訪問者のブラウザがカスタマイズされた書体を読み込めない場合は、代替書体に切り替わります。代替書体は、アップロードした書体ファミリーごとに自動的に生成されます。

あなたはできる 変える 各書体ファミリーの代替書体を選択し、使用可能な書体の配列から元の書体を選択します。

可能です 変化 の フォント表示 ブラウザに保存されたデータに応じてフォント フェイスを読み込む方法を決定する設定。

インストールされたカスタム フォント Mona sans の「表示」設定がスワップに設定されています。 
インサイダーヒント: フォント表示設定をスワップに設定することで、 目に見えないテキストのフラッシュ システムフォントを使用してページの読み込み中に。

デザイナーインターフェースでフォントを確認する方法

デザイナー内では、カスタムフォントやフォントのバリエーションに完全にアクセスできます。必要なフォントを 外観パネル > 組版 > フォント。 フォント 選択すると、ソースに応じてフォントが分類され（例：Googleフォント、Webフォント、カスタムフォントなど）、各ソース内でアルファベット順に並べられます。サイトにアップロードされたフォントはすべて、 カスタムフォント.

任意のテキスト コンポーネント、任意の親要素、または任意の HTML タグにカスタム フォントを適用して、すべての段落またはすべての H1 に影響を与えるオプションがあります。

サイトからカスタムフォントを削除するプロセス

サイトからカスタムフォントを削除するには、そのカスタムフォントのすべての出現箇所を特定し、サイトから削除し、最終的にカスタムフォントをサイトから消去する必要があります。 サイト設定 > フォント タブ > カスタムフォント. 

注記： カスタムフォントを削除するだけで サイト設定 > フォント タブでは、サイトからカスタム フォントが完全に削除されるわけではありません。サイトからカスタム フォントのすべてのインスタンスを削除するまで、カスタム フォントはサイトの公開済み CSS に残ります。

サイト上のカスタムフォントのインスタンスをすべて見つけるには、 出演マネージャー をクリックしてフォント名を検索します。この操作により、そのカスタムフォントを使用しているサイト上のすべてのクラスとHTMLタグのリストが生成されます。リスト各クラスの横にある「 」記号をクリックすると、そのクラスを使用している要素とコンポーネントのリストが表示されます。 

スタイル マネージャーでカスタム フォント「Inter」を検索すると、Body (すべてのページ) タグと 2 つのクラスでこのフォントが使用されていることがわかります。リスト アイコンが強調表示され、現在のページと他のページで影響を受ける要素が表示されます。

カスタムフォントを使用しているクラスやHTMLタグを特定したら、そのフォントを使用している要素を削除し、使用されていないクラスを整理する必要があります。 出演マネージャー、またはそれらのクラスやHTMLタグで使用されるフォントを変更します。 外観パネル > 組版 > フォント. 

サイトからカスタム フォントをすべて削除したら、サイト設定からカスタム フォントを削除できます。 

  1. 案内する サイト設定 > フォント タブ > カスタムフォント 
  2. 選択する 消去 サイトから削除したいカスタムフォントの横にある
  3. 変更を有効にするにはサイトを再公開してください 

詳細については： 高度なウェブタイポグラフィ

ユアン・マック
Ewan Mak による最新の投稿 (すべてを見る)

関連記事

によるユアン・マック
更新日