Google・カスタム・Adobeのフォントを使う

フォントの入手元と利用条件を確認する

デザインソフトで表示できても、訪問者のブラウザーで読み込めるとは限りません。入手元、使用ウェイト、Web利用の条件を確認します。まずGoogleフォントを検索し、カスタムファイルなら利用条件とファイルを確認してから追加します。

表示名、端末上の名前、Web用の名前は異なる場合があります。プロンプトに名前を書くだけで接続済みと考えず、生成・取り込み後に不足フォントとウェイトを確認してください。

Googleまたはカスタムフォントを追加する

リソースのフォントから選択画面を開き、Googleフォントを検索して適用します。事前ダウンロードは不要です。カスタムファイルはWebで利用できるものを追加し、名前、ウェイト、プレビューを確認します。対応形式はttf、otf、woff、woff2で、1ファイル20 MBまでです。

Regularを追加してもBoldが自動でそろうわけではありません。不足するウェイトを補うか、使用可能なフォントへ置き換えてください。

Adobe FontsをKitで接続する

専用入口のあるFigma/PSD取り込みページでは、AdobeフォントからWebプロジェクトのJavaScript埋め込みコードを追加し、検出結果を確認します。専用入口は現在日本語Kitに対応し、1ページ1 Kitです。複数の書体は同じWebプロジェクトにまとめます。

Kit IDだけでなくコード全体を使い、CSS版と混同しないでください。検出後は名前とウェイトを照合し、自動で一致しない文字は手動で対応するフォントに変更します。

専用入口がないページの扱い

HTML取り込みなど専用入口のないページでは、対応する方法でHeadスクリプトに埋め込みコードを設定します。この場合は普通のスクリプトとして扱われ、編集画面やフォント一覧に状態が反映されないことがあります。プレビューか公開URLで確認してください。

同じKitを専用入口とHeadの両方へ重複設定しないでください。他サービスのドメイン登録条件などは、プレビュー・公開の両方について管理者に確認します。

不足・太さの違い・フォールバックの確認

フォントチェックで不足する書体・ウェイトを特定し、追加または置換します。Adobeの検出ができない場合はJavaScriptコード、プロジェクト内の書体、対応Kitかを確認します。名前が違えば手動置換し、太さが違えばそのウェイトがKitにあるかを見ます。

公開後の突然のフォールバックでは外部プロジェクトやアカウント状態も確認します。読み込み元が無効なら、ページ全体の再生成は解決につながりません。

Adobe Kit の変更エラーや一部のウェイト不足

埋め込みコードが変更されたというエラーでは、Adobe の Web プロジェクトから元の JavaScript コードを取得し、古い Kit を外して追加し直します。検出を避けるため AI にコードを書き換えさせないでください。ウェイト追加後も再検出が必要です。可変フォントでも画面が固定の一段階だけを提供する場合、任意の太さを選べるとは限りません。

一部だけ違うなら内部フォント名を調べ、個別またはフォント確認から置換します。日本語クラウドフォントは初回に字形が短く切り替わる場合があり、不要なウェイトを減らすと負担を抑えられますが、実際の端末と回線で確認します。戻ったままなら警告を無視せず、Kit、契約、Web プロジェクトを調べます。

同僚のフォントが見つからない・重複する場合

フォントライブラリは Profile ごとに管理されます。同僚と同じ Profile かを確認し、ページが参照しているリソースと選べるアップロード済みフォントも区別します。他の人の端末で表示されるだけで、ライブラリにあるとは限りません。

同じファミリーとウェイトが存在する場合は既存のものを選び、名前を変えて繰り返し送らないでください。解析エラーでは破損、対応形式、20 MB の上限を確認し、正規の入手元から適切なファイルを用意します。拡張子を woff に変えても形式の変換にはなりません。

名前の不一致と、外した後に再表示される場合

ファイル内部のファミリー名はデザイン上の表示名と異なることがあります。空白、ハイフン、Pro、Std なども確認します。アップロード済みでも不足と出る場合は、文字ツールバーやフォント確認から正しいファミリーとウェイトを選び、ファイル名だけを変えないようにします。

ページから関連付けを外しても、Profile 全体のライブラリを削除するわけではありません。文字が参照していれば、開き直した際に再び関連付く場合があります。全参照を置換してから外し、プレビューと公開先を確認します。一ページの問題のため、他で必要なリソースを削除しないでください。

訪問者の環境で確認して引き継ぐ

フォントを入れていない端末で、プレビューと公開ページの漢字、記号、太字、改行、ボタン幅を確認します。書き出しでは同梱されるファイルとクラウド依存を区別し、すべてがオフラインになると考えないでください。装飾文字を画像にする場合も利用条件を確認し、コピー・検索・自然な改行ができなくなる点に注意します。