タイポグラフィー

[タイポグラフィー]ではサイトのbodyタグに適用するfont-famiyに関する設定や外部フォントの読み込みに関する設定を行えます。

適用できるフォントタイプは次の通りです。

  • ローカルフォント
  • WEBフォント

ローカルフォントを利用する

サイトを運営する上では、デザイン重視のLPページでも無い限り極力ローカルフォントを積極的に利用することを推奨します。特に日本語のWEBフォント(NotoSans JP や Kosugiが有名)は最適化を適切に行ってもフォントファイル自体の容量が英語フォントと比較してもかなり多いので、できるだけ避けるべきでしょう。

Brandiaが初期設定として適用しているローカルフォントは次の通りです。

CSS
body{
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic",Verdana, Meiryo, sans-serif;
}

WEBフォントを読み込む

フォント選びを怠ってはいけません。WEBフォントはサイトの見た目をより美しく、洗練させるのにとても便利です。一方でWEBWEBフォントの容量を気にせずに使ってしまうと、サイトのパフォーマンスに影響が出ます。

特に、日本語フォントは英語フォントと比較して容量が圧倒的に多く、できるだけ避けるのが無難と言えます。

英語フォントを使う場合でも、必要なFont-weightプロパティに対応している物のみを読み込むことで軽量化を図ることができます。

Brandiaが初期設定として適用しているWEBフォント次の通りです。

WEBフォント

HTML
https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap

Font-Famiyのプロティ

CSS
body {
font-family: "Quicksand", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", sans-serif;
}
補足

外部フォントは [Google Font]を想定しています。他のフォントを読み込むに当たって差し支え(機能が足りないなど)がある場合はフォーラムよりお問い合わせください。その際、利用したいFontサービスと必要な機能を詳しく明記してください。

この記事はお役に立ちましたでしょうか? はい いいえ