読み込むWebフォントの数が多すぎると(グリフ数の少ない欧文フォントとはいえ)サイトの表示スピードに影響するのではないか。
ということで、まずは個人的にイケてると思う海外メディアのWebフォント使用状況を調べてみました。
結論
平均すると1サイトあたり9つのWebフォントを利用していました。意外と多くても大丈夫なのかな、という印象です。
結果
narratively
ベンダー
Google fonts
使用フォント
- 'Lora'
- normal 400
- normal 700
- italic 400
- italic 700
- 'Montserrat'
- normal 400
- normal 700
- 'Pathway Gothic One'
- normal 400
Quartz
ベンダー
Google fonts
使用フォント
- 'PT Serif'
- normal 400
- normal 700
- italic 400
OZY
ベンダー
Fontdeck
使用フォント
- 'Futura'
- normal 200
- normal 300
- normal 600
- normal 800
- normal normal
- italic 200
- italic 300
- italic 600
- italic normal
- 'Calluna'
- normal normal
- normal bold
- italic normal
medium
ベンダー
Adobe Typekit
使用フォント
- 'freight-text-pro'
- normal 400
- normal 700
- italic 400
- italic 700
- 'jaf-bernino-sans'
- normal 300
- normal 400
- normal 700
Nautilus
ベンダー
Adobe Typekit
使用フォント
- 'freight-display-pro'
- italic 300
- italic 500
- 'freight-sans-pro'
- normal 300
- normal 400
- normal 500
- normal 700
- normal 900
- italic 500
- 'freight-text-pro'
- normal 400
- italic 500
Q ideas
ベンダー
Adobe Typekit
使用フォント
- 'freight-text-pro'
- normal 300
- normal 400
- normal 500
- normal 600
- normal 700
- normal 900
- normal 400
- italic 300
- italic 400
- italic 500
- italic 600
- italic 700
- italic 900
Bustle
ベンダー
Adobe Typekit
使用フォント
- 'brandon-grotesque'
- normal 300
- normal 400
- normal 500
- italic 400
- 'ff-tisa-web-pro'
- normal 400
- normal 700
- italic 400
Atavist
ベンダー
Adobe Typekit
使用フォント
- 'proxima-nova'
- normal 100
- normal 300
- normal 400
- normal 600
- normal 700
- normal 800
- normal 900
- italic 100
- italic 300
- italic 400
- italic 600
- italic 700
- italic 800
- italic 900
99u
ベンダー
Hoefler & Co.
使用フォント
- 'Tungsten A'
- normal 500
- normal 600
- 'Tungsten B'
- normal 500
- normal 600
- 'Knockout 30 A'
- normal 400
- 'Knockout 30 B'
- normal 400
Polygon
ベンダー
Hoefler & Co.
使用フォント
- 'Mercury SSm A'
- normal 400
- normal 700
- italic 400
- 'Mercury SSm B'
- normal 400
- normal 700
- italic 400
- 'Gotham SSm A'
- normal 400
- normal 700
- italic 300
- 'Gotham SSm B'
- normal 400
- normal 700
- italic 300
- 'Gotham A'
- normal 900
- 'Gotham B'
- normal 900