国内主要サイトのfont-familyを調べた in 2016

以前、国内の主要サイトのfont-familyを調べたが、今年はどうなっているのか。昨今のfont-family事情を考えるとどうなっているのか気になり再び調べてみた。

条件

国内サイトの条件

• Top Sites in Japan - Alexaに記載されているサイトから調べる
• 他言語のサービスの場合は、日本語のページを対象とする
• リダイレクトされるページの場合は、リダイレクト先を対象とする

どこの font-family をみるか

基本的には、htmlや body に設定されているfont-familyを調べる。

サイト一覧

今回の主要サイトは以下の通り。

1. Google.co.jp
2. Yahoo.co.jp
3. Youtube.com
4. Amazon.co.jp
5. Fc2.com
6. Facebook.com
7. Twitter.com
8. Wikipedia.org
9. Rakuten.co.jp
10. Nicovideo.jp
11. Livedoor.jp
12. Ameblo.jp
13. Naver.jp
14. Goo.ne.jp
15. Dmm.co.jp
16. Kakaku.com
17. Hatenablog.com
18. Hatena.ne.jp
19. 2ch.net
20. Qiita.com

このドメイン配下のサービス、例えばブログなどもまとめて集計されている上に各ブログでfont-familyが異なっているはずなので、正確な情報は取れない。ひとまず、”主要サイト”のトップページのfont-familyを調べることにする。

font-family の結果

Google.co.jp

body,
td,
a,
p,
.h {
  font-family: arial, sans-serif;
}

Yahoo.co.jp

body {
  font-family: "MS PGothic", Arial, "Hiragino Kaku Gothic ProN", "Osaka",
    sans-serif;
}

Youtube.com

body,
input,
button,
textarea,
select {
  font-family: Roboto, arial, sans-serif;
}

Amazon.co.jp

body {
  font-family: "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic ProN",
    Meiryo, sans-serif;
}

Fc2.com

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Facebook.com

body,
button,
input,
label,
select,
td,
textarea {
  font-family: Lucida Grande, Tahoma, Verdana, Arial, "hiragino kaku gothic pro",
    meiryo, "ms pgothic", sans-serif;
}

Twitter.com

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.ja {
  font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,
    "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

Wikipedia.org

html,
body {
  font-family: sans-serif;
}

Rakuten.co.jp

body {
  font-family: Meiryo, "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}

Nicovideo.jp

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

Livedoor.jp

* {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI",
    "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}

Ameblo.jp

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

Naver.jp

body.ExOsWin {
  font-family: Meiryo, "MS PGothic", arial, sans-serif;
}
body.ExOsMac {
  font-family: arial, sans-serif;
}

Goo.ne.jp

body {
  font-family: Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "ＭＳ Ｐゴシック", Arial, Sans-serif;
}

Dmm.co.jp

body {
  font-family: "Hiragino Kaku Gothic Pro", "¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "¥á¥¤¥ê¥ª",
    Meiryo, "£Í£Ó £Ð¥´¥·¥Ã¥¯", sans-serif;
}

Kakaku.com

body {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, arial, verdana,
    sans-serif;
}

Hatenablog.com

body {
  font-family: Open Sans, Helvetica Neue, Helvetica, Arial, ヒラギノ角ゴ Pro W3,
    Hiragino Kaku Gothic Pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic,
    sans-serif;
}

Hatena.ne.jp

html {
  font-family: sans-serif;
}
.is-pc {
  font-family: Arial, Helvetica, sans-serif;
}
.is-touch {
  font-family: Arial, Helvetica, sans-serif;
}

2ch.net

body {
  font-family: Arial, Helvetica, San-serif;
}

Qiita.com

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif;
}