この投稿では、Squarespace にフォントを追加する方法と、Squarespace の Web サイトのフォントを変更する方法について説明します。Squarespace には、約 600 の Google フォントと 1,000 の Adobe フォントを含む、膨大なフォントのコレクションが用意されています。ただし、既存のブランドのフォントやその他の好みに合ったフォントが Squarespace のスタイルエディタにない場合は、カスタムフォントをインストールできます。
Squarespace でカスタムフォントをアップロードして使用することで、Web サイトに特定の美的な魅力を追加して、全体的な外観と雰囲気を向上させることができます。この投稿では、Squarespace でカスタムフォントを追加して変更する手順について説明します。
Squarespace にフォントを追加してフォントを変更する方法
カスタムフォントを実装すると、独自のフォントファイルをアップロードして、Squarespace Web サイトの特定の見出しや本文テキストに適用できます。CSS コードを使用してカスタムフォントをさらにスタイル設定し、Web サイトを次のレベルに引き上げることもできます。
Squarespace にフォントを追加してフォントを変更するには、次の手順に従います。
- カスタムフォントをアップロードする
- CSS コードにフォントを追加する
- 特定の見出しと本文テキストにフォントを適用する
これらを詳しく見てみましょう。
1] カスタムフォントをアップロードする
まず、カスタムフォントファイルを用意します。フォントダウンロード Web サイトから目的のフォントをダウンロードするか、オンラインツールを使用して独自の TrueType フォントを作成できます。
フォントファイルが.ttf、.otf、または .woff形式で準備できたら、Squarespace アカウントにログインして Web サイトのダッシュボードでデザインオプションをクリックします。次に、カスタム CSSを選択します。
カスタム CSS パネルの下部までスクロールして、カスタムファイルを管理するというボタンをクリックします。次に、画像またはフォントを追加するオプションをクリックします。システムからフォントファイルを参照して選択し、Squarespace にフォントをアップロードできるようにします。
2] CSS コードにフォントを追加する
フォントを Web サイトに追加するには、CSS コードに追加する必要があります。
カスタム CSS パネルのコードエディタに次のコードを入力します。
@font-face {
font-family: 'FontName';
src: url();}
ここで、FontName をカスタムフォントの名前に置き換えます。
次に、カーソルを括弧()の間に置き、カスタムファイルを管理するポップアップのフォントリンクをクリックします。フォントの URL が括弧の間に自動的に追加されます。
3] 特定の見出しと本文テキストにフォントを適用する
使用する Squarespace のバージョンに応じて、カスタムフォントを適用する見出しまたは段落を選択できます。Squarespace 7.0は 4 つの異なる見出し/段落スタイル (h1、h2、h3、p) をサポートし、Squarespace 7.1は 7 つの異なる見出し/段落スタイル (h1、h2、h3、h4、.sqsrte-large (p1)、p (p2)、.sqsrte-small (p3)) をサポートしています。
カスタムフォントを適用する場所を決めたら、CSS コードエディタで次のコードスニペットから適切な部分を使用 (入力) します。
h1 {
font-family: 'FontName';
}
h2 {
font-family: 'FontName';
}
h3 {
font-family: 'FontName';
}
h4 {
font-family: 'FontName';
}
.sqsrte-large {
font-family: 'FontName';
}
p {
font-family: 'FontName';
}
.sqsrte-small {
font-family: 'FontName';
}
FontName をカスタムフォントの名前に置き換え、保存ボタンをクリックして Squarespace の Web サイトに変更を適用します。
以上です。お役に立てば幸いです。
Squarespace は完全にカスタマイズ可能ですか?
はい、Squarespace は完全にカスタマイズ可能です。デザイン上の課題のほとんどは組み込みのスタイルオプションを使用して解決できますが、CSS コードを使用して Squarespace の Web サイトをさらにカスタマイズできます。十分なコーディング知識がない場合は、Squarespace フォーラムにアクセスしたり、Squarespace Circle に参加したり、Squarespace のエキスパートを雇ったりすることができます。
Squarespace で独自のフォントを使用できますか?
Squarespace では、自分で作成したフォントを含むカスタムフォントを使用できます。カスタムフォントをアップロードするオプションは、Squarespace アカウントのダッシュボードにあります。フォントをアップロードしたら、CSS コードを使用して Web サイトに追加できます。追加されたフォントは、選択した見出しまたは段落に適用できます。
コメントする