さて、CSSでどんなフォントがよく指定されているかを調べてみました。
これは2019年6月中旬の調査です。[→2003年2月下旬調査分 / 2003年10月上旬調査分]
| 9905 | Arial |
| 8339 | Helvetica |
| 7505 | メイリオ |
| 6216 | ヒラギノ角ゴ Pro |
| 5569 | ＭＳ Ｐゴシック |
| 5002 | Verdana |
| 4043 | Helvetica Neue |
| 3886 | ヒラギノ角ゴ ProN |
| 3815 | Roboto |
| 3642 | San Francisco |
| 2757 | Osaka |
| 2627 | FontAwesome |
| 2560 | Glyphicons Halflings |
| 2313 | Consolas |
| 2195 | Ariel |
| 2185 | clean |
| 2184 | Monaco |
| 2127 | Courier New |
| 2085 | Segoe UI |
| 2019 | Droid Sans |
| 1733 | Courier |
| 1350 | Menlo |
| 1198 | Georgia |
| 1078 | Tahoma |
| 0990 | Open Sans |
| 0872 | 游ゴシック / 游ゴシック体 |
| 0824 | Lucida Grande |
| 0804 | Source Code Pro |
| 0685 | Times |
| 0662 | Mona |
| 0650 | Times New Roman |
| 0648 | IPA MonaPGothic |
| 0639 | Arial Black |
| 0614 | Fairwater |
| 0612 | Blank |
| 0612 | Calluna |
| 0612 | |
| 0560 | Oxygen |
| 0560 | Ubuntu |
| 0549 | Cantarell |
| 0504 | Oxygen-Sans |
| 0495 | IcoMoon |
| 0459 | Trebuchet MS |
| 0447 | Andale Mono |
| 0436 | Liberation Mono |
| 0428 | MS UI Gothic |
| 0340 | Gibson |
| 0321 | DejaVu Sans Mono |
| 0308 | Avenir |
| 0299 | Genericons |
| 0294 | Source Sans Pro |
| 0289 | Avenir Next |
| 0286 | dashicons |
| 0285 | ＭＳ ゴシック |
| 0272 | blogicon |
| 0246 | Noto Sans Japanese |
| 0236 | Segoe WP |
| 0214 | Baskerville |
| 0202 | |
| 0195 | Font Awesome 5 Brands |
| 0184 | 游明朝 / 游明朝体 |
| 0182 | Noticons |
| 0175 | Lucida Console |
| 0174 | Lato |
| 0174 | Slick |
| 0173 | |
| 0171 | Palatino |
| 0165 | Lucida Sans Unicode |
チェック対象は、HTML文書内のstyle要素とstyle属性のCSSの指定と外部CSSファイルです。およそ12,000ページを調べました。あまり正確な調査にならなかったので雰囲気程度にとらえてください。
左側の数字は調べた範囲での出現数、右側がフォント名です。フォント名のうしろの印は次の通り。
ここでは実際にそのフォントでフォント名を表示するようにしました。フォントがあればそれで表示されるはずですが、ブラウザによっては表示されないこともあります。
さて、Webフォントでは、「Roboto」「Open Sans」はGoogle制作のsans-serif系欧文フォント、「Source Code Pro」はソースコード表示のためにAdobeが作った等幅欧文フォント、「FontAwesome」はアイコンフォントです。またフォント名にiconが含まれるのものは、アイコンなどのパーツ用のフォントのようです。
15番目に「Ariel」というのがありますが、フォント名としては検索しても見つからなかったので、「Arial」の誤記だと思います。 「clean」もわかりませんでした。「Blank」は「Adobe Blank」のことだと思いますが、フォント名とリソースを関連づける@font-faceの記述が見つからなかったので断言できません(こちらの収集スクリプトがへっぽこなだけかも)。
アイコンフォントを除くと、本文用のフォントばかりといった印象で、見出しなどの大きな文字用のインパクトのあるものは見当たりませんね。極細から極太まで多くの太さを持つフォントが増えたこともあり、目立つだけのフォントが求められる時代ではないということでしょうか。ちなみに「HG創英角ﾎﾟｯﾌﾟ体」「HGP創英角ﾎﾟｯﾌﾟ体」「HGS創英角ﾎﾟｯﾌﾟ体」を指定していたのはわずか3サイトのみでした。