カスタムフォントをサイトに使用する方法
どのように動作するか
サイトビルダーで利用できるデフォルトのフォントを使用したくない場合は、カスタムHTMLコードを使ってGoogle Fontsカタログの異なるフォントをヘッダーや本文に接続することができます。既存のソリューションを使用することも、独自のコードを追加することもできます。
入手方法
既存のソリューションを使用する
- アドミンページでプロジェクトを開きます。
- サイドバーで「サイトビルダー」をクリックします。
- 「サイトビルダーを開く」をクリックします。
- フォントのURLを「カスタムコード」ブロックに挿入して、
font-familyの値を変更するスタイルクラスを指定します。
ヘッダーフォントの変更例
Copy
- html
<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
.custom-header-font h1,
.custom-header-font h2,
.custom-header-font h3,
.custom-header-font h4,
.custom-header-font h5,
.custom-header-font h6 {
font-family: 'Playfair Display';
}
</style>
本文テキストフォントの変更例
Copy
- html
<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
.custom-main-font {
font-family: 'Playfair Display';
}
</style>
- 「プレビュー」をクリックして変更を確認します。
この手順については、チュートリアルビデオをご覧ください：
自分のコードを追加する
- ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。
- 独自のコードをブロックに挿入します。
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。お役立ちリンク
最終更新日: 2024年3月26日誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
