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

4 min read
hiroweb developer

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

条件

国内サイトの条件

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

どこの font-family をみるか

基本的には、htmlbody に設定されている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 Pゴシック", "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 Pゴシック", "MS PGothic", sans-serif;
}

Livedoor.jp

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

Ameblo.jp

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, "MS Pゴシック", "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",
    "MS Pゴシック", 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", "MS Pゴシック", Osaka, arial, verdana,
    sans-serif;
}

Hatenablog.com

body {
  font-family: Open Sans, Helvetica Neue, Helvetica, Arial, ヒラギノ角ゴ Pro W3,
    Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, 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;
}