Squarespace 7.1のフォント変更方法（サイトスタイルとCSS）

Squarespace 7.1のフォントをサイトスタイルで変更、独自フォントのアップロード、カスタムCSSで特定要素だけ変更する方法。手順と比較表、トラブル対処も解説。

よくある質問

Squarespaceサイト全体のフォントを変更するには？

バージョン7.1のサイトでは、サイトスタイル（Site Styles）を開いて「フォント（Fonts）」をクリックし、おすすめのフォントパックを選ぶか、「すべてのフォントパック（All Font Packs）」を開いてサンセリフ、セリフ、ミックスで絞り込みます。フォントパックを使えば、見出し、段落、ボタン、その他のテキストのフォントをまとめて設定できます。

Squarespaceで好きなGoogleフォントを使えますか？

フォントのドロップダウンでGoogleフォントを名前で検索できますが、Squarespaceのヘルプセンターによると、すべてのGoogleフォントがライブラリに入っているわけではありません。使いたいフォントが見つからない場合は、ライセンスで認められていれば、フォントファイルを自分でアップロードできます。

Squarespaceにアップロードできるフォントファイルの形式は？

サイトスタイルのフォントアップローダーは、OTF、TTF、WOFF、WOFF2ファイルに対応しています。CSSエディタで使う別の「カスタムファイル（Custom Files）」エリアで扱えるのはTTF、OTF、WOFFなので、WOFF2ファイルはCSSファイルエリアではなく、サイトスタイルのアップローダーを使ってください。

独自フォントをアップロードするのに許可は必要ですか？

はい。Squarespaceのヘルプセンターでは、サイトでフォントを使用するには、フォントの所有者またはライセンス提供者の許可が必要だと説明されています。アップロードする前に、Web利用が認められているかライセンスを確認してください。

自分のサイトでフォントの手順が違うのはなぜですか？

バージョン7.0とバージョン7.1のサイトでは、フォントの設定が異なります。このガイドの手順は7.1向けです。7.0では、フォントの変更はデザインパネルのサイトスタイルから行います。また、Squarespaceによると、7.0で設定したAdobeのカスタムフォントは7.1ではサポートされないため、7.1に組み込まれているフォントから選ぶ必要があります。

テンプレートを切り替えても、カスタムCSSは引き継がれますか？

バージョン7.0のサイトでは、Squarespaceによるとテンプレートを切り替えてもカスタムCSSは引き継がれません。追加したCSSはコピーを保存しておき、必要なときに貼り直せるようにしておきましょう。

結論： Squarespace 7.1のサイトでは、サイトスタイル（Site Styles）を開いてフォント（Fonts）をクリックし、フォントパックを選ぶか、見出し（Headings）、段落（Paragraphs）、ボタン（Buttons）、その他（Miscellaneous）を1つずつスタイル設定します。ライブラリにないフォントを使いたい場合は、同じパネルから自分のファイルをアップロードします。カスタムCSSは、特定の1要素だけを変更したいときに使いましょう。

このガイドでは、Squarespace公式ヘルプセンターの説明（2026年11月確認）に沿って、バージョン7.1の手順を紹介します。サイトがバージョン7.0の場合はパネル名が異なります。詳しくは終盤のバージョンに関する補足をご覧ください。

どの方法を選ぶべき？

目的を達成できる、いちばん手軽な方法を選びましょう。表の下にいくほど、準備に手間がかかります。

やりたいことおすすめの方法手間
ワンクリックでサイト全体の雰囲気を変えたいサイトスタイルのフォントパック低
見出しと本文で別のフォントを使いたいサイトスタイルでカテゴリごとに設定低
特定のGoogleフォントを使いたいフォントのドロップダウンで検索低
ライセンスを持っているブランドフォントを使いたいフォントファイルをアップロード中
特定の見出し、ボタン、セクションだけ変えたいカスタムCSS中〜高

方法1：フォントパックでフォントを変更する

フォントパックは、すべてのテキストカテゴリに調和したフォントをまとめて設定してくれるので、サイトの印象を手早く変えたいときに最適です。

  1. エディタを開き、サイトスタイル（Site Styles）（ペイントブラシのアイコン）をクリックします。
  2. フォント（Fonts）をクリックします。
  3. おすすめのパックから選ぶか、すべてのフォントパック（All Font Packs）をクリックして、サンセリフ、セリフ、ミックスで絞り込みます。
  4. パネルを閉じる前に、ページをスクロールして見出し、本文、ボタンの見え方を確認します。

フォントパックは出発点として便利ですが、見出しのフォントは気に入ったのに本文のフォントはしっくりこない、ということもあります。その場合は次の方法で調整できます。

方法2：テキストカテゴリごとにフォントを変更する

フォント（Fonts）では、Squarespaceがテキストを4つのグループに分けています。それぞれ個別に設定できます。

  • 見出し（Headings）：ページタイトルと、テキストブロック内の見出しスタイル。
  • 段落（Paragraphs）：本文テキスト。
  • ボタン（Buttons）：ボタンのラベル。
  • その他（Miscellaneous）：キャプションやフォームのラベルなど、小さめのテキスト（このグループの対象範囲はテンプレートによって異なるため、変更後にいくつかのページで確認してください）。

変更の手順は次のとおりです。

  1. サイトスタイル > フォントで、変更したいカテゴリ（例：見出し）をクリックします。
  2. フォントのドロップダウンを開き、名前で検索します。
  3. フォントを選び、必要に応じてスタイル、太さ、サイズを調整します。
  4. Adobe Fontsを使う場合は、リスト下部の追加フォント（Additional Fonts）リンクから選びます。

Squarespaceでは、他のテキストがその大きさを基準に拡大縮小される基本サイズも設定できます。フォントを変えたあとに全体が大きすぎる、または小さすぎると感じたら、個々のブロックのサイズを変更する前に、まずこの基本サイズを調整しましょう。

実践のコツ：見出しと段落は別々に変更しましょう。両方を一度に変えて違和感が出ると、どちらが原因か分からなくなります。組み合わせ選びに迷ったときは、Webサイトのフォントの選び方のガイドもご覧ください。

方法3：独自フォントをアップロードする

ブランドで使っているフォントがライブラリにない場合は、アップロードしましょう。Squarespaceでは、この方法でフォントを使うには、フォントの所有者またはライセンス提供者の許可が必要だとしています。

  1. OTF、TTF、WOFF、WOFF2いずれかの形式でフォントファイルを用意します。サイトスタイルのアップローダーは4形式すべてに対応しています。
  2. サイトスタイル > フォントを開き、カテゴリ（またはフォントのドロップダウン）を選んで、アップロードのオプションを探します。
  3. アップロード済みフォントのパネルにファイルをドラッグするか、プラスアイコンをクリックしてパソコンからファイルを選びます。
  4. 設定したいカテゴリで、アップロードしたフォントを選択します。
  5. 公開したら、実際のサイトをパソコンとスマートフォンで表示し、フォントが読み込まれているか確認します。

画面上の表記は変わることがあるため、ボタンの名称が違う場合は、フォントのドロップダウン内にあるアップロードまたはプラスのアイコンを探してください。

アップロード時のよくある問題

  • フォントはリストに表示されるのに、見た目がおかしい。 ファイルに太さやスタイル（太字、斜体）が含まれていない可能性があります。使う予定の太さは、それぞれ別のファイルとしてアップロードしてください。
  • エディタでは使えるのに、訪問者には反映されない。 公開ページをスーパーリロード（キャッシュを無視して再読み込み）し、フォントファイルのWeb利用ライセンスも確認してください。
  • WOFF2ファイルをアップロードして、CSSのファイルエリアから参照しようとした。 CSSエディタのカスタムファイル（Custom Files）で扱えるフォント形式はTTF、OTF、WOFFで、WOFF2は含まれません。WOFF2はサイトスタイルのアップローダーを使ってください。

方法4：カスタムCSSで特定の要素だけ変更する

サイトスタイルでは、カテゴリ単位でサイト全体のフォントが変わります。1つだけ別のフォントにしたい見出しなど、例外を作りたいときは、カスタムCSSで対応できます。Squarespace公式のCSSに関する案内では、CSSの変更はフォント、色、背景に限定するよう勧めています。それ以外を変更するとレイアウトが崩れるおそれがあるためです。

  1. 先に方法3でフォントをアップロードするか、ライブラリのフォントを選んで、サイトでそのフォントが使える状態にしておきます。
  2. Website > Pages > Custom CSS（デザイン > カスタムCSS）を開きます（正確なパスはサイトによって多少異なる場合があります）。
  3. 下のようなルールを貼り付けて保存します。

```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }

/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```

「Your Font Name」は、サイトスタイルに表示されているフォント名そのままに置き換えてください。最後の汎用フォント指定（serifまたはsans-serif）は、フォントの読み込みに失敗したときにも文字が読めるようにするための保険です。クラス名はテンプレートやSquarespaceのアップデートによって変わることがあるため、ブラウザの検証ツールで、対象要素のセレクタを確認しましょう。

CSSを1ページだけに適用したい場合は、Squarespaceのヘルプセンターにページ単位のオプションが紹介されています。利用する前に、最新の手順を確認してください。

公開前のフォント確認チェックリスト

このリストをコピーして、一通り確認しましょう。

  • [ ] 見出しと本文で使うフォントファミリーは2つまで。
  • [ ] 本文はパソコンだけでなく、スマートフォンでも読みやすい。
  • [ ] 使っているすべての太さ（標準、太字、斜体）がフォントに含まれている。
  • [ ] アップロードしたフォントのWeb利用ライセンスを持っている。
  • [ ] ボタンやフォームのラベルのフォントが、ページ全体と調和している。
  • [ ] 追加したカスタムCSSのコピーを保存した。
  • [ ] エディタのプレビューだけでなく、公開中のサイトで確認した。

バージョン7.0と7.1の違い

Squarespaceのヘルプセンターによると、7.1のフォントオプションは7.1のサイト向けで、7.0のサイトには独自のフォント設定があります。7.0では、フォントの変更はデザインパネルのサイトスタイルから行います。移行を検討している場合は、Squarespaceにアップデート用のツールがあります。現在のエディタとの比較はSquarespaceレビューで解説しています。フォント以外にも不満がある場合は、Squarespaceの代替サービスのページで他のビルダーを比較できます。Squarespaceサイトの総費用は費用の内訳をご覧ください。

新しくサイトを作るなら

テンプレートを選ぶときや、ゼロからサイトを作るときは、先にタイポグラフィを決めておきましょう。あとから直すより、ずっと楽です。We.Incの無料プランでは、用意されたテンプレートから最大3つのサイトを公開できます。プロンプトからサイトの下書きを作成するAIビルダーは、Starterプラン（月額$20）から利用できます。こちらからサインアップできます。

無料で始める · クレジットカード不要

Umair Ali Sadaqat

We.Inc創業者

UmairはWe.Incの創業者です。AIによるウェブサイト制作、制作会社、ウェブ制作スタジオの経営について執筆しています。

素晴らしいものを作る準備はできましたか？

立ち上げ、成長、自動化のすべてを1つのプラットフォームで行う15,000+社がWe.Incを利用しています。

無料で始める

クレジットカード不要 · 営業担当に相談する

関連: ブログ｜デジタルマーケティングと集客のヒント

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る