フォントファミリー

標準のフォント

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

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

フォント名称 役割 使用されているモジュール
適用されるフォント
root body要素に指定する、ウェブサイト内のベースフォント。 .echo-font-root
'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '-apple-system', 'BlinkMacSystemFont', 'Meiryo', sans-serif
first 汎用の見出し用フォント。 .echo-title .echo-font-first
rootと同じフォント
second 日付や英文を表示する箇所に指定する、英字用フォント。
echo.cssでは object > utility のみ使用している。
.echo-font-second
'Helvetica', 'Roboto', '-apple-system', 'Open Sans', 'Arial', sans-serif
third 特別な見出し等に指定する、デザインフォント。
echo.cssでは object > utility のみ使用している。
.echo-font-third
'游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', 'Bookman Old Style', 'Times New Roman', '-apple-system', 'BlinkMacSystemFont', serif

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

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

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

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

フォントを変更する

Sassを使用する場合

プロジェクト内の _scss/_config_basic.scss の変数 $font-family-*** を変更したうえでビルドしてください。
下記の例では third のフォントが「筑紫ゴシックPrとBetween Pro2の混植」となります。

// third: display
$font-family-third:            'TsukuGoPr5-R-Between2-Light', '-apple-system', 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !default;
$font-weight-third:            300 !default;
$font-family-bold-third:       'TsukuGoPro-B-Between2-Medium', '-apple-system', 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !default;
$font-weight-bold-third:       700 !default;

なお、 $font-family-***$font-family-bold-*** が同じ値だった場合、 font-weight: bold のみが出力されます。

Sassを使用しない場合

css/echo-font.css は、フォント指定のみをまとめたCSSファイルです。
このファイルを直接編集(置換)することで、フォントを変更できます。

以下のとおり echo.min.css よりも後に読み込んで使用してください。

<link rel="stylesheet" href="/css/echo.min.css">
<link rel="stylesheet" href="/css/echo-font.css">