いまさらだけどこのページどのフォントでレンダリングされているの?

いまさらだけどこのページどのフォントでレンダリングされているの?

2021年3月14日
知恵
Pocket

Webページのフォントは、以下のようなcssで、順番にフォントを指定して書いているかと思います。

font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

複数書くのは、OSによって入っているフォントが異なるからです。

ブラウザは、先頭から端末に入っているフォントでレンダリングしようとします。

また、欧文フォントを先に書いておくことにより、一文の中で、英語と日本語が混在した文章の場合にも、想定どおりの表示となります。

今見ていただいているこのページのフォントの指定は、以下となっています。

font-family: "Helvetica neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif

ちなみに、最後のsans-serif(サンセリフ)ですが、こちらは総称ファミリ名といわれるもので最後の砦です。

すべてのフォントがなかった場合に、ゴシック体系のフォントで表示してねとブラウザにゆだねるものです。

だいたいのサイトで、最後のフォント指定は、「sans-serif」となっています。

  • Helvetica neue(ヘルベチカ・ノイエ) ・・・Mac用の欧文フォント
  • Arial(エイリアル)・・・Windows用の欧文フォント
  • Hiragino Sans・・・Mac用の日本語フォント
  • Hiragino Kaku Gothic ProN・・・Mac用の日本語フォント
  • Meiryo(メイリオ)・・・Windows用の日本語フォント
  • sans-serif・・・すべてのフォントがなかった場合の指定

実際に、ブラウザで表示された場合、どのフォントがあたっているかは

Chrome DevToolsを使って確認できます。

いまさらだけどこのページどのフォントでレンダリングされているの?

英語と日本語がまざった文章なので、上記の文章のうち、”Chrome DevTools”(15文字)部分については、Helvetica neueで

“を使って確認できます。”(11文字)部分については、Hiragino Sansでレンダリングされているのが確認できます。

意図した通りのフォント表示になっているのが確認できます。

Windowsで見ている方は、おそらく英語部分は、Arial、日本語部分が、Meiryoになっているのではと思います。

実際に、主要なサイトがどんなフォント指定になっているか確認してみます。

Rendered Fontsについては、あくまでも私の端末に入っているフォントなので皆さんの端末では違う結果になる可能性もありますのであしからず。(macOS Catalina/MacBook Pro(2017))

Apple

Macbook Airの販売ページを確認します。

いまさらだけどこのページどのフォントでレンダリングされているの?
新しいMacBook Airを送料無料でお届けします。選んだモデルをカスタマイズすることもできます。
www.apple.com
    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

Apple独自のフォント指定が入っているのが確認できます。

ちなみに、Network resourceとなっているものは、Webフォントで、Local fileとなっているものが端末内のフォントになります。

Microsoft

font-family: 'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

Mac用の日本語フォントは特にしていないようです。

Google

いまさらだけどこのページどのフォントでレンダリングされているの?
Google の使命は、世界中の情報を整理し、世界中の人々がアクセスできて使えるようにすることです。このサイトでは、Google の沿革やプロダクトなどをご紹介…
about.google
font-family: "Google Sans Display",Arial,Helvetica,sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

Windows用、Mac用の指定は特にしてなさそうです。

Facebook

いまさらだけどこのページどのフォントでレンダリングされているの?
無料のFacebookページを作成して設定すると、Facebookの20億人の利用者にリーチしてつながり、ビジネスを発展させることができます。その方法をご説明し…
www.facebook.com
font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

ビジネスのページなので、無難な設定になっています。

Amazon

https://www.amazon.co.jp/
font-family: Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
いまさらだけどこのページどのフォントでレンダリングされているの?

欧文フォントの指定がありませんでした。

Netflix

font-family "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
いまさらだけどこのページどのフォントでレンダリングされているの?

Netflix Sansは、Netflix独自のフォントのようです。

日本のサイトについてもいくつか確認してみます。

Yahoo!Japan

いまさらだけどこのページどのフォントでレンダリングされているの?
あなたの毎日をアップデートする情報ポータル。検索、ニュース、天気、スポーツ、メール、ショッピング、オークションなど便利なサービスを展開しています。
www.yahoo.co.jp
font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,MS Pゴシック,MS PGothic,sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

日本のサイトだけあって日本語フォントの指定がしっかりしている印象です。

楽天市場

font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

Windowsフォントが先に来ているのは、まだWindowsユーザが多いからですかね。

note

いまさらだけどこのページどのフォントでレンダリングされているの?
クリエイターが文章やマンガ、写真、音声を投稿することができ、ユーザーはそのコンテンツを楽しんで応援できるメディアプラットフォームです。だれもが創作を楽しんで続け…
note.com
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

しっかりと指定している印象です。

NEWSPICKS

いまさらだけどこのページどのフォントでレンダリングされているの?
「経済を、もっとおもしろく。」ビジネスパーソンや就活生必携のソーシャル経済メディア。国内外の最先端の経済ニュースを厳選。専門家や著名人の解説コメントでニュースが…
newspicks.com
font-family: Helvetica,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","メイリオ",Meiryo,sans-serif;
いまさらだけどこのページどのフォントでレンダリングされているの?

読み物系のサイトとそうじゃないサイトでは、フォント指定のこだわりが違いそうですね。

基本私の端末では、日本語は、Hiragino Kaku Gothic Proもしくは、Hiragino Kaku Gothic ProNで表示されていることがわかりました。

フォント1つとってもサイトによってこれだけ異なるのですからすごいですね。

それでは。