当サイトのフォントの設定

Ubuntu > 游ゴシック > Noto Sans CJK JPという設定にしています。 以下詳細です。

@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700);

@font-face {
    font-family: 'Noto Sans CJK JP Light';
    src: local(Noto Sans CJK JP Light),
         local(NotoSansCJKjp-Light);
}

@font-face {
    font-family: 'Yu Gothic Medium';
    src: local(Yu Gothic Medium),
         local(Yu Gothic Regular);
}


body {
    font-family: 'Ubuntu',
                 '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'YuGothic',
                 'Noto Sans CJK JP Light',
                 sans-serif;
    -webkit-text-stroke-width: 0.15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    color: #404040;
    position: relative;
    background: #FFF;
}
pre, code, var, samp, kbd {
    -webkit-text-stroke-width: 0px;
    font-size: 100%;
    font-family: 'Ubuntu Mono', monospace;
}
  • ウェイトを細めの Light(300) にしています。
  • @font-faceで環境ごとの差異を吸収するような指定の仕方をしています。やりすぎるとデバッグし辛いので程々にしたつもりです。

Ubuntuフォント

英字フォントにはUbuntuを指定しています。GoogleのWebフォントを利用しています。 等幅フォントにもUbuntu Monoを指定しています。mの形が好きです!

@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700);

游ゴシックフォント

読みやすいですよね。

@font-face {
    font-family: 'Yu Gothic Medium';
    src: local(Yu Gothic Medium),
         local(Yu Gothic Regular);
}

游ゴシック好きなんですが、各OSの実装がバラバラなのでややこしいですね...

  • 游ゴシック / Yu Gothic Medium : Windows 10用
  • 游ゴシック / Yu Gothic Regular : Windows 8.1用
  • 游ゴシック体 / YuGothic : Mac用

Noto Sans CJK JPフォント

こちらも読みやすいですよね。 ただ、Webフォントとしても読み込んでいないので、インストールされていない環境では 表示されません。インストールしている環境向けです(自己満足用)。

@font-face {
    font-family: 'Noto Sans CJK JP Light';
    src: local(Noto Sans CJK JP Light),
         local(NotoSansCJKjp-Light);
}

NotoSansCJKjp-Lightという指定はiPhoneでAnyFont等のアプリ を使ってNoto Sans CJK JPをインストールした時にiPhoneに登録されたフォント名です。 Webフォントにしようとも思ったのですが、サブセット化しても700KBを超えてしまうのでやめました。 当サイトごときにデータ通信量を消費するのももったいないですしね。

その他

WindowsのChromeだけウェイトが細すぎるので、

-webkit-text-stroke-width: 0.15px;

という指定を入れました。

あとはMac用のアンチエイリアス設定

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

以上、自己満足なフォント設定の紹介でした。