フォントを変更する

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

最終更新日 2025年2月04日

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

動画を見る

Squarespaceのフ⁠ォントの使いかた

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

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

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

  • Squarespaceのフ⁠ォント パ⁠ックは⁠、すべてのフ⁠ォント設定を手作業で選択しなくてもサイトに統一感のあるスタイルを適用できるようにデザインされています⁠。フ⁠ォント パ⁠ックには広く利用されているGoogle Fontsが使用されているため⁠、複数のプラ⁠ットフ⁠ォ⁠ーム間でブランデ⁠ィングに一貫性を持たせることができます⁠。
  • サイト全体で一貫性を保つために⁠、フ⁠ォント スタイルのオプシ⁠ョンは意図的に制限されています⁠。微調整オプシ⁠ョンでは希望のフ⁠ォントを実現できない場合⁠、CSSでカスタム フ⁠ォントを追加できます⁠。バ⁠ージ⁠ョン7⁠.0では⁠、カスタムAdobe Fontsを追加できます⁠。
  • WindowsとMac⁠、iOSとAndroidなど⁠、デバイスによ⁠ってレンダリングが異なるフ⁠ォントもあります⁠。また⁠、ドロ⁠ップダウン メニ⁠ュ⁠ーなどのフ⁠ォントのレンダリングが⁠、ブラウザ⁠ーによ⁠って異なる場合があります⁠。
  • 場合によ⁠っては⁠、GoogleやAdobe側で⁠、ライブラリ⁠ーからフ⁠ォントが削除されることがあります⁠。削除されたフ⁠ォントを使用していて⁠、別のフ⁠ォントに切り替えた場合⁠、元のフ⁠ォントに戻すことはできません⁠。その場合⁠、同じような見た目になるよう⁠、ライブラリ⁠ー内の最も近いフ⁠ォントに置き換わります⁠。

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

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

ヒント

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

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

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

テキストはフ⁠⁠ォントの基本サイズに基づいて拡大または縮小されます⁠⁠。フ⁠⁠ォントの設定に関係なく⁠⁠、テキストの拡大と縮小を使用すると⁠⁠、テキスト ブロ⁠⁠ックい⁠⁠っぱいに表示することができます⁠⁠。

テキストはブラウザ⁠⁠ーのサイズに基づいて拡大縮小されます⁠⁠。一部のテンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ーには⁠⁠、テキストのスケ⁠⁠ールを微調整するオプシ⁠⁠ョンが用意されています⁠⁠。

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

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

サイト全体のすべてのフ⁠⁠ォントを変更するには⁠⁠、次の手順に従います⁠⁠。

  1. ペ⁠⁠ージの編集中に⁠⁠、サイト スタイルを開き⁠⁠、[⁠⁠フ⁠⁠ォント⁠⁠] の横にある>をクリ⁠⁠ックします⁠⁠。
  2. 現在のフ⁠⁠ォント パ⁠⁠ックの [⁠⁠切り替え⁠⁠] をクリ⁠⁠ックすると⁠⁠、使用可能なすべてのフ⁠⁠ォント パ⁠⁠ックが表示されます⁠⁠。[⁠⁠Sans-serif⁠⁠]⁠⁠、[⁠⁠Serif⁠⁠]⁠⁠、[⁠⁠混合⁠⁠] をクリ⁠⁠ックすると⁠⁠、それぞれのスタイルのさまざまなフ⁠⁠ォント パ⁠⁠ックが表示されます⁠⁠。
  3. 新しいフ⁠⁠ォント パ⁠⁠ックをクリ⁠⁠ックして⁠⁠、サイト上でプレビ⁠⁠ュ⁠⁠ーします⁠⁠。
  4. [⁠⁠戻る⁠⁠] をクリ⁠⁠ックして [⁠⁠フ⁠⁠ォント⁠⁠] パネルに戻り⁠⁠、フ⁠⁠ォントの基本サイズを設定します⁠⁠。他のすべてのテキストは⁠⁠、このサイズを基準にして拡大縮小されます⁠⁠。
  5. 他のペ⁠⁠ージのコンテンツを編集する間も⁠⁠、変更はそのまま保持されます⁠⁠。変更を保存するには⁠⁠、[⁠⁠保存⁠⁠] をクリ⁠⁠ックします⁠⁠。編集を中止するには⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックします⁠⁠。

Google FontsまたはAdobe Fonts (⁠⁠旧Typekit⁠⁠) をサイトに読み込みたくない場合は⁠⁠、組み込みフ⁠⁠ォント パ⁠⁠ックのいずれかを選択してください⁠⁠。

  • [⁠⁠Sans-serif⁠⁠] で⁠⁠、[⁠⁠Helvetica Neue⁠⁠] を選択します
  • [⁠⁠Serif⁠⁠] で⁠⁠、[⁠⁠Georgia⁠⁠] を選択します
  • [⁠⁠Mixed⁠⁠] で [⁠⁠Verdana⁠⁠] を選択します

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

  1. [⁠⁠フ⁠⁠ォント⁠⁠] パネルで⁠⁠、[⁠⁠スタイルの割り当て⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. タイトルボタンなど⁠⁠、変更したい特定のテキスト グル⁠⁠ープを見つけてクリ⁠⁠ックすると⁠⁠、そのグル⁠⁠ープのすべての微調整オプシ⁠⁠ョンが開きます⁠⁠。ペ⁠⁠ージ プレビ⁠⁠ュ⁠⁠ー上の任意のテキストをクリ⁠⁠ックして⁠⁠、微調整オプシ⁠⁠ョンを表示することもできます⁠⁠。
  3. 微調整オプシ⁠⁠ョンの横にあるドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーをクリ⁠⁠ックして⁠⁠、新しいフ⁠⁠ォント スタイルを割り当てます⁠⁠。さらにカスタマイズするには⁠⁠、[⁠⁠カスタム⁠⁠] をクリ⁠⁠ックし⁠⁠、表示される他のオプシ⁠⁠ョンを使用します⁠⁠。
  4. すべてのリストに戻るには⁠⁠、[⁠⁠すべて表示⁠⁠] または [⁠⁠戻る⁠⁠] をクリ⁠⁠ックします⁠⁠。

フ⁠⁠ォントの微調整オプシ⁠⁠ョンを変更するには⁠⁠、サイト スタイルを開きます⁠⁠。使用しているテンプレ⁠⁠ートに応じて⁠⁠、これらのフ⁠⁠ォント グル⁠⁠ープで表示されるオプシ⁠⁠ョンと名前は異なります⁠⁠。フ⁠⁠ォントの微調整オプシ⁠⁠ョンは⁠⁠、影響を受けるグル⁠⁠ープのタイトルと⁠⁠、追加のオプシ⁠⁠ョンを開く小さな矢印で識別できます⁠⁠。

Google FontsやAdobe Fonts (⁠⁠旧Typekit⁠⁠) をサイトに読み込みたくない場合は⁠⁠、[⁠⁠サイト スタイル⁠⁠] パネルの一番下にある [⁠⁠すべてをシステム フ⁠⁠ォントに設定⁠⁠] をクリ⁠⁠ックしてください⁠⁠。

変更するテキスト グル⁠⁠ープが見つからない場合は⁠⁠、テンプレ⁠⁠ートのガイドでテンプレ⁠⁠ートのスタイル オプシ⁠⁠ョンの詳細をご確認ください⁠⁠。ペ⁠⁠ージ上のテキストをクリ⁠⁠ックして⁠⁠、サイト スタイルの微調整オプシ⁠⁠ョンを表示することもできます⁠⁠。[⁠⁠すべて表示⁠⁠] をクリ⁠⁠ックすると⁠⁠、全リストに戻ります⁠⁠。

adirondack_-_display_certain_style_options.jpg

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

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

特定のGoogleのフ⁠⁠ォントを使用するには⁠⁠、[⁠⁠すべてのフ⁠⁠ォントを閲覧⁠⁠] オプシ⁠⁠ョンで検索してください⁠⁠。

  1. [⁠⁠サイト スタイル⁠⁠] パネルを開き⁠⁠、[⁠⁠フ⁠⁠ォント⁠⁠] の横にある>をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠見出し⁠⁠]⁠⁠、[⁠⁠段落⁠⁠]⁠⁠、[⁠⁠ボタン⁠⁠]⁠⁠、[⁠⁠その他⁠⁠] など⁠⁠、変更するテキストの種類をクリ⁠⁠ックします⁠⁠。
  3. フ⁠⁠ォント名をクリ⁠⁠ックします⁠⁠。
  4. スクロ⁠⁠ールして使用可能なフ⁠⁠ォントを参照するか⁠⁠、パネルの上部にある [⁠⁠フ⁠⁠ォントを検索⁠⁠] フ⁠⁠ィ⁠⁠ールドにフ⁠⁠ォント名を入力します⁠⁠。Adobe Fontsを参照するには⁠⁠、リストの下部にある [⁠⁠追加のフ⁠⁠ォント⁠⁠] をクリ⁠⁠ックします⁠⁠。
  5. 他のペ⁠⁠ージのコンテンツを編集する間も⁠⁠、変更はそのまま保持されます⁠⁠。変更を保存するには⁠⁠、[⁠⁠保存⁠⁠] をクリ⁠⁠ックします⁠⁠。編集を中止するには⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックします⁠⁠。

ヒント

[⁠⁠その他⁠⁠] カテゴリ⁠⁠ーは⁠⁠、商品の価格⁠⁠、メニ⁠⁠ュ⁠⁠ー ブロ⁠⁠ック ナビゲ⁠⁠ーシ⁠⁠ョン⁠⁠、その他のコンテンツ メタデ⁠⁠ータなど⁠⁠、見出しや通常の段落テキストではないほとんどのテキストに適用されます⁠⁠。

特定のGoogleまたはAdobeのフ⁠⁠ォントを使用するには⁠⁠、フ⁠⁠ォントの微調整オプシ⁠⁠ョン内の検索フ⁠⁠ィ⁠⁠ールドを使用して検索します⁠⁠。

  1. [⁠⁠デザイン⁠⁠] パネルを開き⁠⁠、[⁠⁠サイト スタイル⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. 変更するフ⁠⁠ォントの微調整オプシ⁠⁠ョンをクリ⁠⁠ックし⁠⁠、フ⁠⁠ォント名の横にあるドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーをクリ⁠⁠ックします⁠⁠。
  3. スクロ⁠⁠ールして使用可能なフ⁠⁠ォントを参照するか⁠⁠、メニ⁠⁠ュ⁠⁠ーの上部にある [⁠⁠フ⁠⁠ォントを検索⁠⁠] フ⁠⁠ィ⁠⁠ールドにフ⁠⁠ォント名を入力します⁠⁠。
  4. 使用するフ⁠⁠ォントをクリ⁠⁠ックし⁠⁠、パネル上部の [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を適用します⁠⁠。

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

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

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

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

フ⁠⁠ォントのスタイルを設定するには⁠⁠、次の手順に従います⁠⁠。

  1. [⁠⁠サイト スタイル⁠⁠] パネルを開き⁠⁠、[⁠⁠フ⁠⁠ォント⁠⁠] の横にある>をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠見出し⁠⁠]⁠⁠、[⁠⁠段落⁠⁠]⁠⁠、[⁠⁠ボタン⁠⁠]⁠⁠、[⁠⁠その他⁠⁠] など⁠⁠、変更するテキストの種類をクリ⁠⁠ックします⁠⁠。
  3. フ⁠⁠ォント名が上部に表示されます⁠⁠。スタイル設定と様⁠⁠々なサイズのオプシ⁠⁠ョンを使用してスタイルを変更します⁠⁠。
  4. 他のペ⁠⁠ージのコンテンツを編集する間も⁠⁠、変更はそのまま保持されます⁠⁠。変更を保存するには⁠⁠、[⁠⁠保存⁠⁠] をクリ⁠⁠ックします⁠⁠。編集を中止するには⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックします⁠⁠。

以下の表に記載されているスタイルを調整してください⁠⁠。

ヒント

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

スタイル名

オプシ⁠⁠ョン

重み

テキストを太くまたは細くします⁠⁠。

スタイル

フ⁠⁠ォントに応じて⁠⁠、テキストを標準⁠⁠、太字⁠⁠、斜体⁠⁠、またはその他の形式に設定します⁠⁠。

行の高さ

テキストの行間隔を変更します⁠⁠。

文字の間隔

文字の間隔を変更します⁠⁠。

テキスト変換

テキストの一部を大文字にするか⁠⁠、すべてを大文字にするか⁠⁠、ま⁠⁠ったく大文字にしません⁠⁠。この微調整オプシ⁠⁠ョンは⁠⁠、特定のフ⁠⁠ォントにのみ適用されます⁠⁠。

サイズ

テキストを大きくまたは小さくします⁠⁠。テキスト タイプごとに1つ以上のサイズ オプシ⁠⁠ョンがあります⁠⁠。たとえば⁠⁠、[⁠⁠見出し⁠⁠] の [⁠⁠サイズ⁠⁠] セクシ⁠⁠ョンには⁠⁠、[⁠⁠見出し1⁠⁠]⁠⁠、[⁠⁠見出し2⁠⁠]⁠⁠、[⁠⁠見出し3⁠⁠]⁠⁠、[⁠⁠見出し4⁠⁠] の書式設定用のスライダ⁠⁠ーがあります⁠⁠。テキスト ツ⁠⁠ールバ⁠⁠ーを使用して⁠⁠、個⁠⁠々のテキスト ブロ⁠⁠ックのテキスト サイズを変更することもできます⁠⁠。

フ⁠⁠ォントまたはタイポグラフ⁠⁠ィの微調整オプシ⁠⁠ョンをクリ⁠⁠ックすると⁠⁠、フ⁠⁠ォント名⁠⁠、サイズ⁠⁠、文字の間隔などの追加オプシ⁠⁠ョンが開きます⁠⁠。

特定のテキストとテンプレ⁠⁠ートに応じて⁠⁠、以下の表にリストされているタイポグラフ⁠⁠ィ オプシ⁠⁠ョンを調整できます⁠⁠。さまざまなフ⁠⁠ォントやテンプレ⁠⁠ートに対して⁠⁠、そのほかのスタイルオプシ⁠⁠ョンや微調整オプシ⁠⁠ョンを使用できます⁠⁠。

ヒント

テキストの色を変更するには⁠⁠、サイト スタイルでそのテキスト タイプの色の微調整オプシ⁠⁠ョンを使用します⁠⁠。詳しくは⁠⁠、「⁠⁠色を変更する⁠⁠」をご覧ください⁠⁠。

微調整オプシ⁠⁠ョン名

オプシ⁠⁠ョン

フ⁠⁠ォント

GoogleまたはAdobeのフ⁠⁠ォントを選択または検索します⁠⁠。メニ⁠⁠ュ⁠⁠ーの上部に厳選された選択肢が表示されます⁠⁠。下にスクロ⁠⁠ールしてライブラリ⁠⁠ー全体を参照するか⁠⁠、使用したいフ⁠⁠ォントの名前がわか⁠⁠っている場合はメニ⁠⁠ュ⁠⁠ー上部の検索フ⁠⁠ィ⁠⁠ールドを使用します⁠⁠。

フ⁠⁠ォント サイズ

スライダ⁠⁠ーを使用するか⁠⁠、手動でフ⁠⁠ォント サイズを入力します⁠⁠。

行の高さ

行の間隔を設定します⁠⁠。行の高さが0emの場合⁠⁠、特にモバイル デバイスではテキストが重なる可能性があることに注意してください⁠⁠。

文字の間隔

文字の間隔を設定します⁠⁠。負の値を指定すると⁠⁠、文字が重なることがあります⁠⁠。

テキスト変換

[⁠⁠なし⁠⁠]⁠⁠、[⁠⁠キ⁠⁠ャピタライズ⁠⁠]⁠⁠、[⁠⁠大文字⁠⁠]⁠⁠、[⁠⁠小文字⁠⁠] を選択します⁠⁠。

テキスト デコレ⁠⁠ーシ⁠⁠ョン

[⁠⁠なし⁠⁠]⁠⁠、[⁠⁠下線⁠⁠]⁠⁠、[⁠⁠上線⁠⁠]⁠⁠、[⁠⁠取り消し線⁠⁠] から選択します⁠⁠。

テキストを揃える

[⁠⁠⁠⁠]⁠⁠、[⁠⁠中央⁠⁠]⁠⁠、または [⁠⁠⁠⁠] を選択します⁠⁠。

カスタム Adobe フ⁠ォントの追加 (⁠バ⁠ージ⁠ョン7⁠.0のみ⁠)

カスタム フ⁠ォントをお持ちの場合は⁠、Adobe Fontsと統合することで⁠、フ⁠ォントをSquarespaceバ⁠ージ⁠ョン7⁠.0サイトに追加できます⁠。

  • この処理で⁠、サイト スタイルのメニ⁠ュ⁠ーのAdobe Fonts オプシ⁠ョンがカスタム プロジ⁠ェクトのフ⁠ォントに置き換えられます⁠。SquarespaceのAdobe Fontsは⁠、カスタム Adobe Fonts プロジ⁠ェクトが有効にな⁠っている間は使用できません⁠。
  • カスタム フ⁠ォントは⁠、Adobe Creative Cloud サブスクリプシ⁠ョンで利用できます⁠。サブスクリプシ⁠ョン登録する前に⁠、Adobe Fontsが含まれるプランを選択してください⁠。
  • カスタムのAdobeフ⁠ォントはバ⁠ージ⁠ョン7⁠.1ではサポ⁠ートされていませんが⁠、カスタムCSSを使用してバ⁠ージ⁠ョン7⁠.1にフ⁠ォントを追加することはできます⁠。これは高度なオプシ⁠ョンであり⁠、サポ⁠ートの範囲外となりますのでご注意ください⁠。

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

カスタム フ⁠ォントをバ⁠ージ⁠ョン7⁠.0のサイトに追加するには⁠、まず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をコピ⁠ーしてください⁠。
adobe_-_project_ID.jpg
  1. [⁠開発者ツ⁠ール⁠] パネルを開きます⁠。
  2. [⁠外部APIキ⁠ー⁠] をクリ⁠ックします⁠。
  3. [⁠Adobe Fonts Project ID (⁠Adobe Fonts プロジ⁠ェクトID⁠)⁠] ボ⁠ックスまで下にスクロ⁠ールします⁠。
  4. Adobeからコピ⁠ーしたプロジ⁠ェクトIDをボ⁠ックスに貼り付けます⁠。
  5. [⁠保存⁠] をクリ⁠ックします⁠。

ステ⁠ップ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を押してテキストを貼り付けると⁠、書式設定が削除されます⁠。
  • クリ⁠ップボ⁠ード アイコンをクリ⁠ックして⁠、書式を設定せずにテキストを貼り付けることもできます⁠。入力済みのテキストに対しては⁠、テキストを強調表示し⁠、書式設定を削除アイコンをクリ⁠ックして書式設定を削除します⁠。
paste_and_clear_formatting_icons.jpg

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

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

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

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

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

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

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

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

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。