フォントファミリー

標準のフォント

世界でも類を見ない文字種(ひらがな・カタカナ・漢字・全角英数・半角英数)を使用する日本語圏では、商業ウェブサイトでのフォントファミリーの指定が、非常に精細になっています。
echo.cssでは、要素の役割に応じて、最大で4種類のフォントを使用することができます。

標準の、CSS・Sass内のフォント名称とフォントの対応は以下の通りです。
フォントは _scss/_config_basic.scss で変更することができます。

フォント名称 役割 使用されているモジュール
適用されるフォント
root body要素に指定する、ウェブサイト内のベースフォント。 .u-font-root
'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '-apple-system', 'BlinkMacSystemFont', 'Meiryo', sans-serif
first コンポーネントの小見出し等に指定する、汎用の見出し用フォント。 .c-card-title .c-media-title .u-font-first .wysiwyg > h1,h2
rootと同じフォント
second 日付や英文を表示する箇所に指定する、英字用フォント。 .u-font-second .p-footer-copyright
'Helvetica', 'Roboto', '-apple-system', 'Open Sans', 'Arial', sans-serif
third コンポーネントの大見出し等に指定する、デザインフォント。echo.cssでは明朝体(serif)を指定しているが、ゴシック体でも構わない。 .c-hero-title .c-flip-title .m-font-third
'游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', 'Bookman Old Style', 'Times New Roman', '-apple-system', 'BlinkMacSystemFont', serif
mono ソースコード等に使用される、等幅フォント。 .m-font-mono
'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace

日本語ウェブフォントサービスにおける、font-weight問題について

著名な日本語ウェブフォントサービスでは、CSSプロパティの font-weight だけでは、文字の太さを変更できない問題があります。
特定ブラウザでの不具合の回避、見た目の問題など、サービスごとに理由は異なり、今のところ解消される様子はありません。

echo.cssでは、これらのサービスを使用したときに不都合が出ないよう、以下の対応を行っています。

  • フォント関連の変数を、normalとboldの二種類に分けて指定する
  • 文字の太さが変更されるクラスのスタイル指定では、 font-family を併記する

font-familyを都度指定する必要がない場合

ウェブフォントサービスを利用しない等の理由で、font-familyを都度指定する必要がない場合は、echo.cssのコードが冗長になります。
フォント関連の変数をコメントアウトすると、不要なスタイルを削除し、ファイルサイズを軽減できます。

下記の例では third のフォントが root と同じとなります。

// third: display
// $font-family-third:            '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', 'Bookman Old Style', 'Times New Roman', '-apple-system', 'BlinkMacSystemFont', serif !default;
// $font-weight-third:            300 !default;
// $font-family-bold-third:       $font-family-third;
// $font-weight-bold-third:       700 !default;