プロのようにSquarespaceにカスタムフォントを追加する方法

公開: 2022-01-07

正方形のパターンの紫色の背景は、Squarespaceカスタムフォントを示しています。

Squarespaceにカスタムフォントを追加したいですか？

Squarespaceユーザーの方は、プラットフォームにいくつかのソリッドフォントオプションが付属していることをすでにご存知でしょう。 しかし、SquarespaceのWebサイトにフォントを追加する理由はたくさんあります。

通常、それはブランドフォント、またはあなたが作成した特注のフォントです。

多分それはあなたがあなたのウェブサイト内の要素のために作成したい特定の外観についてです。

理由が何であれ、Squarespaceにカスタムフォントを追加するのは簡単です-このプロセスに従うだけです！

SquarespaceWebサイトにカスタムフォントを追加する方法

選択したフォントをSquarespaceWebサイトに追加するのは非常に簡単ですが、追加するCSSが少しあります。

始める前にそれをやって大丈夫であることを確認するか、誰かをつかんでください。

ステップ1.フォントを選択します

使用するフォントをすでに選択している場合は、次の手順にスキップしてください。 それ以外の場合は、ブログで合法的に使用できるフォントを選択していることを確認してください。

Creative Marketなど、無料および有料のフォントを見つける場所はたくさんあります。 ただし、Webサイトにライセンスを追加する前に、ライセンスを確認してください。

ステップ2.Webフォントファイルを準備します

Webサイトにフォントを追加するには、次の3つのフォントファイル形式が必要です。

  1. .ttfまたは.otf
  2. .woff
  3. .woff2

Webフォントファイルタイプがある場合は、この手順をスキップしてください。 あなたはそれだけを使うことができます。

それ以外の場合は、3つのファイルタイプを追加する準備をしてください。

ステップ3.フォントファイルをSquarespaceにアップロードします

[デザイン]>[カスタムCSS]>[カスタムファイルの管理]に移動します

ここでは、アップロードボタンを使用してフォントを追加します。

これを3つのファイルすべてに対して、またはWebフォントファイルに対して繰り返します。

ステップ4.Squarespaceでカスタムフォントに名前を付けます

フォントがアップロードされたら、CSSエディターでSquarespaceにどこに何があるかを伝える必要があります。

次のコードを使用します。

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

これを取得して、フォントに関連する情報を追加します。

  • フォント名：これを、ファイル名または覚えやすいものに基づいたフォントの名前に置き換えます。
  • フォントURL：これをアップロードしたフォントのURLに置き換えます。 アップロード領域からURLを取得し（画像のURLの場合と同じ方法で）、これを所定の場所に追加します。

ステップ5.カスタムフォントを使用する場所と方法を定義する

最後に、SquarespaceにWebサイトでさまざまなフォントを使用する場所を指示する必要があります。

これは、ヘッダーやサイトヘッダー、ボタン、またはニュースレターブロックなどの場所に配置できます。

一般的な場所でフォントを使用する方法

フォントをアップロードしたら、Squarespaceにフォントの使用場所に関する特定の情報を提供し始めることができます。

ここにいくつかの人気のある例とその方法があります。

サイトヘッダーフォントを変更する方法

サイトヘッダーは、ナビゲーションバーの上部にある領域です。

ここにはたくさんのリンク、テキストのロゴ、そしておそらくアナウンスがあるかもしれません。

これらすべてのフォントは、次のCSSスニペットを使用して変更できます。

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

YOURNAMEをフォントの名前に置き換えることを忘れないでください。

ボタンのフォントを変更する方法

カスタムフォントを使用するもう1つの人気のある場所は、Webサイトのボタンです。

ボタンブロックには、小、中、大の3つがあります。 次のコードを使用して、それらの1つまたはすべてを変更できます。

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

YOURNAMEをフォントの名前に置き換えることを忘れないでください。

後で戻ってくることができるように、Pinterestにピン留めしてください！

（グラフィックの後のカスタムフォントのヒントとトラブルシューティングの詳細）。

ピンクパープルとブルーの正方形のデザインは、Squarespaceにカスタムフォントを追加する方法を示しています。

ニュースレターのブロックフォントを変更する方法

ニュースレターブロックを使用すると、ユーザーはあなたの電子メールリストにサインアップできます。 多くの人がこれに異なるプラグインを使用しています。

ただし、Squarespace内でブロックを使用する場合は、次のコードでカスタムフォントを追加できます。

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

YOURNAMEをフォントの名前に置き換えることを忘れないでください。

ブログ投稿のフォントを変更する方法

フォントを使用する最も一般的なことの1つは、ブログの投稿に使用することです。

これを行うときは、記事ページのページタイトル、説明、および投稿タイトルを考慮する必要があります。

おそらく、それらすべてを同じにする必要があります。

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

YOURNAMEをフォントの名前に置き換えることを忘れないでください。

引用ブロックフォントを変更する方法

最後の例は、QuoteBlockを別のフォントに変更することです。

これは、投稿の引用だけでなく、顧客の証言やレビューなどにも使用されます。

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

YOURNAMEをフォントの名前に置き換えることを忘れないでください。

私のSquarespace画像サイズガイドもお気に召すかもしれません。

カスタムフォントの問題

小さなCSSを理解すれば、フォントの追加は簡単です。 ただし、報告される一般的なエラーがいくつかあります。

サイトスタイルの「サポートされていないフォント」メッセージ

場合によっては、サイトに「サポートされていないフォント」というメッセージが表示されることがあります。 これは、Adobeフォントが使用された後、Adobeがそれを廃止した場合に発生します。

ほとんどの場合、Squarespaceは最も近い代替手段の代わりに使用します。 ただし、そうでない場合は、別のフォントをアップロードして置き換える必要があります。

ログインするとフォントが違って見える

ログインしたときとライブサイトを表示したときで、フォントが異なって見えることに気付くことがあります。 通常、これはフォントリーダーとそのサイトの表示方法が原因です。

これに気付いた場合は、Squarespaceのサポートに連絡してください。設定を確認して、何を調整する必要があるかを確認できます。

フォントを特定のサイズに設定できません

フォントに特定のサイズを設定する際の問題は、通常、Webサイトのバックエンドに関係しています。 使用しているSquarespaceのバージョンが原因である可能性があります。

だから、何が悪いのかについて彼らの援助を得るために支援に手を差し伸べてください。

カスタムフォントをSquarespaceに追加します

CSSを使用するだけで、カスタムフォントファイルをSquarespaceにすばやく追加できます。

少しのコードでさまざまな場所でそれらを使用し、サイズから文字間隔まですべてを調整できます。

スタイルエディタを使用すると、組み込みのフォントオプションを超えてWebサイトを簡単にカスタマイズできます。

では、カスタムフォントを使用して、Webサイトをさらにスマートに見せるためにどのようにしたらよいでしょうか。

リラックスできるカップルがいる青い正方形の広場には、Squarespaceにカスタムフォントを追加する方法が記載されています。