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

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」を指定しています。

各々のフォントは以下のOSで使われます。

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
Microsoft
Google
Facebook
Amazon
Netflix
Yahoo!Japan
楽天市場
note
NEWSPICKS

Apple

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

    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;

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

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

Microsoft

Microsoft - AI、クラウド、生産性向上、コンピューティング、ゲーム、アプリ

家庭とビジネスに役立つ Microsoft の製品、サービスが揃っています。Mi…

www.microsoft.com

font-family: 'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;

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

Google

font-family: "Google Sans Display",Arial,Helvetica,sans-serif;

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

Facebook

https://www.facebook.com/business/pages/set-up

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

https://www.netflix.com/

font-family "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif

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

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

Yahoo!Japan

font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;

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

楽天市場

https://www.rakuten.co.jp/

font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;

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

note

font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;

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

NEWSPICKS

NewsPicks | 経済を、もっとおもしろく。

「経済を、もっとおもしろく。」ビジネスパーソンや就活生必携のソーシャル経済メディ…

newspicks.com

font-family: Helvetica,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","メイリオ",Meiryo,sans-serif;