サイト コンテンツ全体のフォント、テキスト サイズ、テキストの色、間隔などをカスタマイズします。

サイト スタイルを使用して、サイト全体のフォント スタイルを変更します。最初は、ブランドに合わせてカスタマイズできる既定のフォント設定がすべてのサイトに適用されています。

これらのフォントのスタイル設定オプションはバージョン7.1サイトで使用できます。バージョン7.0サイトには異なるフォント設定があります。

フォントのスタイル設定についての動画

この動画では、フォントのスタイル設定の概要をご紹介しています。

フォント パックを使用してサイト全体のフォントを変更する

すべてのSquarespaceサイトでは、一貫したフォントのスタイル設定のためにフォント パックが使用されています。フォント パックには広く利用されているGoogle Fontsが使用されているため、複数のプラットフォーム間でブランディングに一貫性を持たせることができます。新しいフォント パックを選択することで、サイト全体のフォントを変更できます。

フォント パックを選択するには、次の手順に従ってください。

1. [サイト スタイル] パネルを開きます。
2. [フォント] をクリックすると推奨フォント パックをすぐに選択できます。または、[フォント] の横にある>をクリックし、[すべてのフォント パック] をクリックすると、使用可能なすべてのパックが表示されます。
3. サンセリフのフォント パックを表示するには [Sans-serif] を、セリフのフォント パックを表示するには [Serif] を、セリフとサンセリフの両方のフォントを含むフォント パックを表示するには [混合] をクリックします。
4. フォント パックをクリックして、サイト上でプレビューします。
5. 気に入ったフォント パックが見つかったら、[保存] をクリックします。

フォント パックを編集する

現在のフォント パックのスタイルを設定するには、次の手順に従ってください。

1. [サイト スタイル] パネルを開きます。
2. [フォント] の横にある>をクリックします。
3. 基本のサイズを変更するには、+または-をクリックします。サイト上のすべてのテキストは、このサイズを基準にして拡大縮小されます。
4. [見出し]、[段落]、[ボタン]、または [その他] をクリックして、サイト上の様々なカテゴリーのテキストのスタイルを設定します。フォント カテゴリーに関するほとんどの変更は、サイト全体に適用されます。たとえば、見出しのフォントを変更すると、サイト全体で見出しとして書式設定されているすべてのテキストに適用されます。
5. [スタイルの割り当て] をクリックして、テキストの各エリアにスタイルを設定します。
6. [保存] をクリックします。

各フォント カテゴリーは何に影響しますか？

各フォント パックには次のカテゴリーが含まれます。

• 見出し - 見出しの書式設定を使用するテキスト ブロックと、ブロックやその他のコンテンツのタイトル テキストに適用されます。
• 段落 - 段落の書式設定を使用するテキスト ブロック、ブロックの本文テキスト、およびその他のコンテンツに適用されます。
• ボタン - ボタンのテキストに適用されます。
• その他 - 主にコンテンツのメタデータや、在庫僅少ラベルのような特定の機能など、他のカテゴリーの影響を受けないサイト上のテキストに適用されます。

各フォント カテゴリーでは何をスタイル設定できますか？

各フォント カテゴリーには、同じスタイル オプションがあります。ボタン カテゴリーには、プライマリ、セカンダリ、ターシャリのボタン タイプのオプションがあります。

スタイル設定オプションには以下が含まれます。

• フォント - カテゴリーで使用されるフォントを選択します。
• スタイル - フォントに応じて、テキストを標準、太字、斜体、またはその他の形式に設定します。
• 太さ - テキストを太くまたは細くします。
• 行の高さ - テキストの行間隔を変更します。
• 文字の間隔 - 文字の間隔を変更します。
• テキスト変換 - テキストの一部を大文字にするか、すべてを大文字にするか、まったく大文字にしません。この微調整オプションは、特定のフォントにのみ適用されます。
• サイズ - テキストを大きくまたは小さくします。見出し、段落、ボタンには、各書式設定オプションに応じた異なるサイズ設定が含まれています。

ヒント: テキストの色を変更するには、サイト全体またはセクションの色を変更します。テキスト ブロックでは、テキスト ツールバーも使用できます。

特定のフォント微調整オプションをカスタマイズする

同じカテゴリー内の他のテキストとは見た目を変えたい場合、サイト上の特定のテキスト エリアのスタイルを設定できます。これは、重要なテキストを目立たせたり、ページに視覚的なアクセントを加えたりするのに最適な方法です。

特定のフォントの微調整オプションを変更するには、次の手順に従います。

1. [サイト スタイル] パネルを開きます。
2. [フォント] の横にある>をクリックします。
3. [スタイルの割り当て] をクリックします。
4. フォーム ブロックやCookieバナーなど、テキストを変更したい特定のテキスト機能を見つけます。
5. その機能のカスタマイズしたいテキストをクリックします。ページ プレビュー上の任意のテキストをクリックして、微調整オプションを表示することもできます。これらのオプションは機能によって異なります。
6. [スタイル] ドロップダウン メニューをクリックし、[見出し]、[段落]、または [その他] をクリックして新しいスタイル カテゴリーを割り当てるか、[カスタム] をクリックしてスタイルを個別にカスタマイズします。
7. [サイズ] ドロップダウン メニューをクリックして新しいサイズ オプションを割り当てるか、[カスタム] をクリックしてサイズを手動で設定します。
8. [保存] をクリックします。

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

使用したい特定のGoogle Fontsがある場合は、サイト スタイルで検索できます。フォント ライブラリーには、すべてのGoogle Fontsが含まれているわけではないためご注意ください。

特定のGoogle Fontsを見つけるには、次の手順に従ってください。

1. [サイト スタイル] パネルを開きます。
2. [フォント] の横にある>をクリックします。
3. [見出し]、[段落]、[ボタン]、[その他] など、変更するテキストのカテゴリーをクリックします。
4. [フォント] の下のドロップダウン メニューをクリックします。
5. スクロールして使用可能なフォントを参照するか、パネルの上部にある [すべてのフォントを検索] フィールドにフォント名を入力します。また、リストの下部にある [追加のフォント] をクリックして、Adobe Fontsを参照することもできます。
6. 使用するフォントをクリックし、[保存] をクリックします。

使いたいフォントがわからない

フォントがわからない場合は、GoogleやAdobeで直接フォントを検索してプレビューできます。気に入ったフォントが見つかったら、Squarespaceで検索してください。

Squarespaceはどのようなフォントを使用していますか？

Squarespaceのフォント コレクションには、600種類のGoogle Fontsと1,000種類のAdobe Fontsが含まれています。メニューを短くするため、最初は最近使用したフォントとよく使用されるオプションのみが表示されています。このコレクションには、GoogleやAdobeが提供しているすべてのフォントや書式設定オプションが含まれているわけではありません。

サイトにAdobe Fontsが読み込まれることを防ぐことはできますか？

はい。Adobe Fonts (旧Typekit) をサイトに読み込みたくない場合は、組み込みフォント パックのいずれかをご選択ください。特定のフォント微調整オプションをカスタマイズする場合は、[追加のフォント] をクリックした後に表示されるフォントを選択しないでください。

カスタム フォントをアップロードできますか？

はい、使用したいフォントが利用できない場合や、利用可能な微調整オプション以外のフォント編集を行いたい場合、カスタム フォントをアップロードできます。

別の端末でフォントが異なって見えるのはなぜですか？

WindowsとMac、iOSとAndroidなど、デバイスによってレンダリングが異なるフォントもあります。また、ドロップダウン メニューなどのフォントのレンダリングが、ブラウザーによって異なる場合があります。

Squarespaceで以前使用していたフォントが見つからないのはなぜですか？

場合によっては、GoogleやAdobe側で、ライブラリーからフォントが削除されることがあります。削除されたフォントを使用していて、別のフォントに切り替えた場合、元のフォントに戻すことはできません。その場合、ライブラリー内の最も近いフォントに置き換わります。

テキストの書式設定はフォント スタイルにどのような影響を与えますか？

サイトを編集する際、テキストの書式設定を使用して、様々な見出しや段落スタイルでサイトのテキストを構造化できます。

テキスト ツールバーでテキストの書式設定を変更すると、そのテキスト エリアのサイト スタイル設定が上書きされます。たとえば、テキスト ツールバーでブログ投稿の抜粋テキストの書式を「見出し1」として設定し、さらにサイト スタイルでブログの抜粋のフォントまたはサイズを調整した場合、変更したテキストは引き続き「見出し1」のスタイルに従います。