フォントカタログ3・CSSで使われるフォント

さて、CSSでどんなフォントがよく指定されているかを調べてみました。

これは2019年6月中旬の調査です。[→2003年2月下旬調査分 / 2003年10月上旬調査分]


CSSで指定されているフォント

9905Arial WinMac
8339Helvetica Mac
7505メイリオ Win
6216ヒラギノ角ゴ Pro Mac
5569MS Pゴシック Win
5002Verdana WinMac
4043Helvetica Neue Mac
3886ヒラギノ角ゴ ProN Mac
3815Roboto Web
3642San Francisco Mac
2757Osaka Mac
2627FontAwesome Web
2560Glyphicons Halflings Web
2313Consolas Win
2195Ariel
2185clean
2184Monaco Mac
2127Courier New WinMac
2085Segoe UI Win
2019Droid Sans
1733Courier WinMac
1350Menlo Mac
1198Georgia WinMac
1078Tahoma WinMac
0990Open Sans Web
0872游ゴシック / 游ゴシック体 WinMac
0824Lucida Grande Mac
0804Source Code Pro Web
0685Times Mac
0662Mona
0650Times New Roman WinMac
0648IPA MonaPGothic
0639Arial Black WinMac
0614Fairwater Web
0612Blank
0612Calluna Web
0612tumblr-icons Web
0560Oxygen Web
0560Ubuntu Web
0549Cantarell
0504Oxygen-Sans
0495IcoMoon Web
0459Trebuchet MS WinMac
0447Andale Mono Mac
0436Liberation Mono
0428MS UI Gothic Win
0340Gibson Web
0321DejaVu Sans Mono
0308Avenir Mac
0299Genericons Web
0294Source Sans Pro Web
0289Avenir Next Mac
0286dashicons Web
0285MS ゴシック Win
0272blogicon Web
0246Noto Sans Japanese Web
0236Segoe WP
0214Baskerville Mac
0202optica-icons Web
0195Font Awesome 5 Brands Web
0184游明朝 / 游明朝体 WinMac
0182Noticons Web
0175Lucida Console Win
0174Lato Web
0174Slick Web
0173 Web
0171Palatino Mac
0165Lucida Sans Unicode Win

チェック対象は、HTML文書内のstyle要素とstyle属性のCSSの指定と外部CSSファイルです。およそ12,000ページを調べました。あまり正確な調査にならなかったので雰囲気程度にとらえてください。 左側の数字は調べた範囲での出現数、右側がフォント名です。フォント名のうしろの印は次の通り。
WinWindowsの標準フォント / MacMacの標準フォント / WebWebフォント

ここでは実際にそのフォントでフォント名を表示するようにしました。フォントがあればそれで表示されるはずですが、ブラウザによっては表示されないこともあります。

さて、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サイトのみでした。