ブランドに合うようにカスタム フォントでサイトをパーソナライズする

Squarespaceに用意されていないフォントを使用したい場合、サイト スタイルでフォントをアップロードすることで、サイトのどこででもカスタム フォントを使用できるようになります。これは、組み込みのフォント オプション以外を使用してブランドを強化するための優れた方法です。

サイトでフォントを使用するには、フォントの所有者またはライセンサーから必要なすべての許可を得ていることをご確認ください。詳細については、ベストプラクティスをご覧ください。Squarespaceの組み込みフォントを使用するには、「フォントを変更する」をご覧ください。

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

フォントをアップロードすると、フォントの微調整オプションに表示されます。 カスタム フォントのアップロード方法は、サイトのバージョンによって異なります。

サポートされているファイルの種類

カスタム フォントは以下のいずれかのファイル形式でアップロードしてください。

• .otf
• .ttf
• .woff
• .woff2

可変フォントは使用できますか？

可変フォント、つまり複数の太さやスタイルを含むフォントファイルは、現時点ではサポートされていません。特定のフォントの他の太さやスタイルを使用するには、それぞれを個別のファイルとしてアップロードしてください。

サイトでカスタム フォントを使用する

アップロードしたカスタム フォントを使用するには、次の手順に従ってください。

1. サイト スタイルでフォントの微調整オプションを見つけて、フォントのドロップダウン メニューをクリックします。
2. カスタム フォントは [アップロード済み] に表示されます。リストから希望のフォントを選択するか、検索バーを使用して検索します。

カスタム フォントを削除する

カスタム フォントを削除するには、次の手順に従ってください。

1. 削除するフォントがサイトで使用されていないことをご確認ください。微調整オプションを他のフォントに変更し、変更を保存します。
2. サイト スタイルでフォントの微調整オプションを見つけて、フォントのドロップダウン メニューをクリックします。
3. [アップロード済み] の横にある [管理] をクリックします。
4. フォントとそのすべてのスタイルを削除するには、フォント名の横にある […] をクリックします。フォントの特定のスタイルを削除するには、スタイル名の横にある [X] をクリックします。

フォント ライセンスに関するベスト プラクティス

注: これらのベスト プラクティスは資料であり、法的アドバイスではありません。Webサイトやビジネス、フォント ライセンスに関する具体的なガイダンスについては、法律の専門家に相談することをおすすめします。

カスタム フォントをアップロードする前に、サイトで使用するために必要な権利と許可があることをご確認ください。フォントは通常、フォントの所有者 (またはファウンドリ) から直接、または集約されたフォント ライセンサーを通じてライセンスされます。フォントのライセンス契約には、フォントをどのように、どこで使用できるかの詳細が記載されています。ライセンス契約の形態は多岐にわたるため、注文書やライセンス契約に含まれる使用要件や制限を理解することが重要です。

以下の例をご覧ください。

• ライセンスによって、特定のフォント ファミリーに含まれるすべてのフォントを使用する権利が与えられる場合もあれば、そのファミリー内の特定のフォントのみを使用する権利が与えられる場合もあります。
• 一部のライセンスでは、フォントが使用されているサイトへの月間訪問者数に応じてコストが増減します。
• 動的なWebフォント提供は、静的アセットやロゴでの使用とは異なる料金体系やライセンス構造になる場合があります。

注: 無料でダウンロードできるカスタム フォントであっても、サイト上やその他の一般向けの方法でフォントを使用するには、プロバイダーから有料のライセンスを購入する必要がある場合があります。

カスタム フォントをサイトにアップロードする前に、フォント プロバイダーとの契約をご確認ください。フォントを意図した用途で使用するために必要なすべての権利と許可を確保するのは、ご自身の責任です。

カスタム Adobe フォントの追加 (バージョン7.0のみ)

Squarespaceバージョン7.0では、Adobe Fontsとの統合を使用してカスタム フォントを追加できます。

• この処理で、サイト スタイルのフォント オプションがカスタム プロジェクトのフォントに置き換えられます。SquarespaceのAdobe Fontsは、カスタムAdobe Fontsプロジェクトが有効になっている間は使用できません。
• カスタム フォントは、Adobe Creative Cloudサブスクリプションで利用できます。サブスクリプション登録する前に、Adobe Fontsが含まれるプランを選択してください。

ステップ1 - Webプロジェクトを作成してフォントを追加する

カスタム フォントをバージョン7.0のサイトに追加するには、まずAdobeでWebプロジェクトを作成します。Adobe Fontsアカウントにログインし、手順に従ってWebプロジェクトを作成します。

Webプロジェクトを作成すると、カスタマイズされたHTML埋め込みコードが表示されます。これは不要のため、サイトに追加しないでください。代わりに、次の手順を使用して、より短いプロジェクトIDを取得します。

ステップ2 - Squarespaceにカスタム フォントを追加する

Webプロジェクトに必要なフォントがすべて含まれている場合は、プロジェクトIDを使用してそのプロジェクトをSquarespaceサイトに追加します。

1. Adobe Fontsアカウントで、右上隅にある [My Adobe Fonts (マイ Adobe Fonts)] をクリックします。
2. [Web Projects (Webプロジェクト)] をクリックし、Squarespaceに追加するプロジェクトを見つけます。
3. 埋め込みコードの上にあるプロジェクトID (文字と数字の文字列) をコピーします。例に示されているものではなく、必ず一意のプロジェクトIDをコピーしてください。

4. [開発者ツール] パネルを開きます。
5. [外部APIキー] をクリックします。
6. [Adobe Fonts Project ID (Adobe Fonts プロジェクトID)] ボックスまで下にスクロールします。
7. AdobeからコピーしたプロジェクトIDをボックスに貼り付けます。
8. [保存] をクリックします。

ステップ3 - Adobe Fontsを使用する

Adobe Fontsを追加したら、サイト上のテキストに適用できます。サイト スタイルの組み込みフォントが、Webプロジェクトのフォントに置き換えられます。カスタムAdobeフォントをすばやく見つけるには、[検索] ボックスで名前を検索します。

Adobe Fontsを変更した場合は、Squarespaceで変更内容が表示されるよう、再公開してください。詳しくは、Adobeのドキュメントをご参照ください。

サイト スタイルに「サポートされていないフォント」というメッセージが表示される

このメッセージは、Adobe Fontsで廃止されたフォントをサイトで使用している場合に表示されます。フォントがサポートされなくなった場合は、Squarespace上で最も近いフォントに置き換えられます。エラーに記載されているスタイル セクションを確認して、置き換えられるフォントを承認または変更します。

廃止されたフォントはAdobe Fonts ページからも削除されます。

カスタム Adobe フォントがサイトに表示されない

一部の特殊文字が正しく表示されない場合は、プロジェクトIDをSquarespaceに追加する前に、Webプロジェクトを編集して [すべての文字] を選択してください。

どのフォントも表示されない場合は、サイトにJavaScriptがないかご確認ください。Adobe FontsのJavaScript メソッドを使用してサイトにフォントを追加したことがある場合、フォントが正しく読み込まれない可能性があります。JavaScriptを削除し、上記の手順に従ってAdobe Fontsを追加します。

お問い合わせ先

Adobe FontsプロジェクトIDを追加できない場合、またはAdobe Fontsがサイトに表示されない場合は、当社へお問い合わせください。トラブルシューティングをお手伝いいたします。Adobe Fontsの使用に関するその他の質問については、Adobeに問い合わせるか、Adobeのドキュメントをご覧ください。