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

2016/11/12

4 min read

CSS 調査

hiroweb developer

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

条件

国内サイトの条件

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

どこの font-family をみるか

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

サイト一覧

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

このドメイン配下のサービス、例えばブログなどもまとめて集計されている上に各ブログで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;
}