サイトのテキストのスタイル、サイズ、色、間隔をカスタマイズします。

このガイドでは、フォントのスタイル、サイズ、色、間隔など、サイトのフォントを変更する方法について説明します。すべてのサイトは、始めはサイト スタイルで変更および調整できる既定のフォント スタイルが設定されています。

動画を見る

Squarespaceのフォントの使いかた

フォント メニューを確認するときは、次の点に注意してください。

• Squarespaceのフォント コレクションには、600 種類の Google Fonts と 1,000 種類の Adobe Fonts が含まれています。このコレクションには、Google や Adobe が提供しているすべてのフォントが含まれているわけではありません。スクロールしてライブラリ全体を参照したり、メニューの検索フィールドを使用して特定のフォントを検索したりしてみましょう。
• メニューを短くするため、最初は最近使用したフォントとよく使用されるオプションのみが表示されています。Google Fonts または Adobe Fonts が提供する一部の書式設定オプションはSquarespaceでサポートされていません。

フォントを選択する際は、次の点に注意してください。

• 一貫性のあるフォントを使用することでサイトの外観が統一されるため、これらのオプションは意図的にサポートされていません。微調整オプションでは希望のフォントを実現できない場合、CSSでカスタム フォントを追加できます。バージョン 7.0 では、カスタム Adobe Fonts を追加できます。
• Windows と Mac、iOS とAndroidなど、デバイスによってレンダリングが異なるフォントもあります。また、ブラウザーの違いによっても、ドロップダウン メニューなどのフォントのレンダリングが変わる可能性があります。
• 場合によっては、Google や Adobe 側で、ライブラリーからフォントが削除されることがあります。現時点でそのフォントを使用中のサイトのテキストは変更されることはありませんが、別のフォントに切り替えた後で元のフォントに戻すことはできません。その場合、同じような表示になるよう、ライブラリー内の最も近いフォントに置き換わります。

サイトでフォントを使用する際は、次の点に注意してください。

• フォント カテゴリー (見出しや段落など) に関するほとんどの変更は、サイト全体に適用されます。たとえば、見出し 1 のテキストのフォントを変更すると、サイト全体で見出し 1 に設定されているすべてのテキストに適用されます。
• 本文にヘッダーを作成するには、テキスト ブロック エディターの [フォーマット] ドロップダウン メニューを使用します。ヘッダーを作成した後に、見出しのスタイルを変更できます。詳細については、「テキストの書式設定」をご覧ください。
• テキスト ツールバーでテキストの書式設定を変更すると、サイト スタイルのそのテキスト エリアに設定されているスタイルが上書きされます。たとえば、ブログ投稿の抜粋テキストを見出し1に変更した後、サイト スタイルで抜粋したテキストのフォントまたはサイズを編集しても、変更したテキストは編集されません。

ヒント: サイトに最適なフォントを選択する方法については、「適切なフォントと色を選ぶ」をご覧ください。

Squarespaceでのテキストの拡大と縮小の仕組み

テキストの拡大と縮小とは、テキストのサイズがサイトの特定の領域に収まるように変更することです。Squarespaceのレスポンシブ デザインはどの画面サイズにもフィットします。サイトのテキストがどのように拡大または縮小されるかは、サイトのバージョンによって異なります。

フォント微調整オプションを見つける

フォント微調整オプションは、サイトのバージョンに応じて動作が異なります。

特定のフォントを検索する

フォント検索の操作は、サイトが構築されているSquarespaceのバージョンに応じて異なります。

フォントがわからない場合は、Adobe と Google のプラットフォームに、フォントを検索してプレビューできるリソースが用意されています。

• Adobe Fonts
• Google Fonts

気に入ったフォントが見つかったら、Squarespaceで検索してください。一部のフォントは利用できない場合があります。

フォントのスタイルを設定する

フォントのスタイル設定の操作は、サイトが構築されているSquarespaceのバージョンに応じて異なります。

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

カスタム フォントをお持ちの場合は、Adobe Fonts と統合することで、フォントを Squarespace バージョン 7.0 サイトに追加できます。カスタム Adobe フォントはバージョン7.1 ではサポートされていません。

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

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

カスタム フォントをSquarespaceに追加するには、まずAdobeでWebプロジェクトを作成する必要があります。Adobe Fontsアカウントにログインし、手順に従ってWebプロジェクトを作成します。

Web プロジェクトを作成すると、カスタマイズされたHTML埋め込みコードが表示されます。これは不要のため、サイトに追加しないでください。代わりに、次の手順を使用して、より短い Web プロジェクト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 を追加したら、サイト上のテキストに適用できます。サイト スタイルの組み込み Adobe Fonts が、Web プロジェクトのフォントに置き換えられます。カスタム Adobe フォントをすばやく見つけるには、[検索] ボックスで名前を検索します。

フォントの変更を管理する

• Adobe Fonts を変更した場合は、Squarespaceで変更内容が表示されるよう、再公開してください。詳しくは、Adobe のドキュメントを参照してください。
• 使用しているフォントが Adobe Fonts のコレクションから削除されても、そのフォントは引き続きサイトに読み込まれます。ただし、変更するとサイト スタイルに表示されなくなるため、新しいテキストに適用したり、テキストに再適用したりすることはできません。

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

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 のドキュメントをご覧ください。

フォントに関する問題のトラブルシューティング

これらの手順を実行する前に、問題がブラウザーに関連しているかどうかを確認してください。ブラウザーのトラブルシューティングで問題が解決しない場合は、このセクションで、フォントを変更する際に発生する可能性のあるその他の一般的な状況について確認してください。

テキストをコピーして貼り付けたが、書式設定が異なる

テキストをコピーして貼り付けるときに、SquarespaceのCSSに干渉する書式設定がコピーされる可能性があります。これにより、サイト スタイルで有効にした設定とは異なるテキストが表示されます。

これを回避するには、コピーしたテキストを文書処理プログラムに貼り付けて、特別な書式設定を削除するか、キーボード ショートカットを使用して書式設定を削除することをおすすめします。

• Windows では、Ctrl + Shift + V を押してテキストを貼り付けると、書式設定が削除されます。
• Mac では、⌘ + Shift + V を押してテキストを貼り付けると、書式設定が削除されます。
• クリップボード アイコンをクリックして、書式を設定せずにテキストを貼り付けることもできます。入力済みのテキストに対しては、テキストを強調表示し、書式設定を削除アイコンをクリックして書式設定を削除します。

ログインするとフォントの表示が変わる

ライブ サイトでのフォントのレンダリング方法は、ドメインの影響を受ける可能性があります。

サードパーティー ドメインをサイトに接続した場合は、ドメイン プロバイダーに連絡して、マスク転送を設定していないことを確認してください。マスキングによって、ドメインがサイトに誘導される方法が制御され、Squarespaceのスタイル設定に干渉する可能性があります。

フォントを特定のサイズに設定できない

フォントを特定のpx (ピクセル) サイズに設定できない場合は、サイトで代わりにemまたはremの値が使用されている可能性があります。

• バージョン7.1のすべてのサイトでは、フォント サイズにrem値が使用されます。これは、そのサイズが基本フォント サイズの相対値であることを意味します。フォントのrem値を変更するには、スライダーを使用するか、現在の値をクリックして新しい値を手動で入力します。基本フォント サイズを変更するには、フォント パックの [基本サイズ] を調整します。
• バージョン 7.0 のサイトの場合、一部のテンプレートではフォントと間隔のサイズに px ではなく em が使用されます。数値フィールドに値を直接入力する場合は、em 値を入力するとサイズがスケーラブルに保たれ、px 値を入力するとサイズが固定されます。ただし、テンプレートで px 値のみを使用する場合は、その場所に em 値を入力しないでください。小さな画面でフォントのサイズが正しく変更されなくなる可能性があります。

モバイル端末でフォントが読みにくい

フォントの太さが 100 未満の場合、小型のモバイル端末では非常に明るく見えたり、暗く見えたりすることがあります。すべての端末でテキストが表示されるようにするには、サイト スタイルを開き、フォントの太さが 100 を超えていることを確認します。