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を使って確認できます。
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615650905/e7263d24def8391acfd4a5c04089b5db/e7263d24def8391acfd4a5c04089b5db.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_233,c_scale/f_auto,q_auto/v1615650905/e7263d24def8391acfd4a5c04089b5db/e7263d24def8391acfd4a5c04089b5db.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_595,c_scale/f_auto,q_auto/v1615650905/e7263d24def8391acfd4a5c04089b5db/e7263d24def8391acfd4a5c04089b5db.jpg?_i=AA 768w)
英語と日本語がまざった文章なので、上記の文章のうち、”Chrome DevTools“(15文字)部分については、Helvetica neueで
“を使って確認できます。“(11文字)部分については、Hiragino Sansでレンダリングされているのが確認できます。
意図した通りのフォント表示になっているのが確認できます。
Windowsで見ている方は、おそらく英語部分は、Arial、日本語部分が、Meiryoになっているのではと思います。
実際に、主要なサイトがどんなフォント指定になっているか確認してみます。
Rendered Fontsについては、あくまでも私の端末に入っているフォントなので皆さんの端末では違う結果になる可能性もありますのであしからず。(macOS Catalina/MacBook Pro(2017))
Apple
Macbook Airの販売ページを確認します。
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;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615652875/00af6880f34c87cc263b44f806bbaa18/00af6880f34c87cc263b44f806bbaa18.png?_i=AA 620w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_228,c_scale/f_auto,q_auto/v1615652875/00af6880f34c87cc263b44f806bbaa18/00af6880f34c87cc263b44f806bbaa18.png?_i=AA 300w)
Apple独自のフォント指定が入っているのが確認できます。
ちなみに、Network resourceとなっているものは、Webフォントで、Local fileとなっているものが端末内のフォントになります。
Microsoft
font-family: 'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615652872/d330dac4bde00ac816b391a8a52d0d62/d330dac4bde00ac816b391a8a52d0d62.png?_i=AA 616w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_233,c_scale/f_auto,q_auto/v1615652872/d330dac4bde00ac816b391a8a52d0d62/d330dac4bde00ac816b391a8a52d0d62.png?_i=AA 300w)
Mac用の日本語フォントは特にしていないようです。
font-family: "Google Sans Display",Arial,Helvetica,sans-serif;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615652870/ff84474de96c0584230af46257f176d6/ff84474de96c0584230af46257f176d6.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_116,c_scale/f_auto,q_auto/v1615652870/ff84474de96c0584230af46257f176d6/ff84474de96c0584230af46257f176d6.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_297,c_scale/f_auto,q_auto/v1615652870/ff84474de96c0584230af46257f176d6/ff84474de96c0584230af46257f176d6.jpg?_i=AA 768w)
Windows用、Mac用の指定は特にしてなさそうです。
font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615652867/cf56c2b8b126ae25bc384ac4218e92fa/cf56c2b8b126ae25bc384ac4218e92fa.png?_i=AA 750w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_94,c_scale/f_auto,q_auto/v1615652867/cf56c2b8b126ae25bc384ac4218e92fa/cf56c2b8b126ae25bc384ac4218e92fa.png?_i=AA 300w)
ビジネスのページなので、無難な設定になっています。
Amazon
font-family: Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615655178/3b10aefae595cab1a992978c47ad0fa9/3b10aefae595cab1a992978c47ad0fa9.png?_i=AA 538w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_202,c_scale/f_auto,q_auto/v1615655178/3b10aefae595cab1a992978c47ad0fa9/3b10aefae595cab1a992978c47ad0fa9.png?_i=AA 300w)
欧文フォントの指定がありませんでした。
Netflix
font-family "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615655165/d6032e237799a583f4c55f3433748cf2/d6032e237799a583f4c55f3433748cf2.png?_i=AA 618w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_138,c_scale/f_auto,q_auto/v1615655165/d6032e237799a583f4c55f3433748cf2/d6032e237799a583f4c55f3433748cf2.png?_i=AA 300w)
Netflix Sansは、Netflix独自のフォントのようです。
日本のサイトについてもいくつか確認してみます。
Yahoo!Japan
font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,MS Pゴシック,MS PGothic,sans-serif;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615655174/933f33e49cf80380984cc70fcc7c4e3b/933f33e49cf80380984cc70fcc7c4e3b.png?_i=AA 598w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_138,c_scale/f_auto,q_auto/v1615655174/933f33e49cf80380984cc70fcc7c4e3b/933f33e49cf80380984cc70fcc7c4e3b.png?_i=AA 300w)
日本のサイトだけあって日本語フォントの指定がしっかりしている印象です。
楽天市場
font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615655169/e44122b7d91a92789892dbef71aad168/e44122b7d91a92789892dbef71aad168.png?_i=AA 676w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_118,c_scale/f_auto,q_auto/v1615655169/e44122b7d91a92789892dbef71aad168/e44122b7d91a92789892dbef71aad168.png?_i=AA 300w)
Windowsフォントが先に来ているのは、まだWindowsユーザが多いからですかね。
note
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615655160/02c241521dceac015351f46b6066dd6d/02c241521dceac015351f46b6066dd6d.png?_i=AA 618w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_117,c_scale/f_auto,q_auto/v1615655160/02c241521dceac015351f46b6066dd6d/02c241521dceac015351f46b6066dd6d.png?_i=AA 300w)
しっかりと指定している印象です。
NEWSPICKS
font-family: Helvetica,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","メイリオ",Meiryo,sans-serif;
![いまさらだけどこのページどのフォントでレンダリングされているの?](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1615655156/9efac9056de169d523be8caffe1f2891/9efac9056de169d523be8caffe1f2891.png?_i=AA 648w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_115,c_scale/f_auto,q_auto/v1615655156/9efac9056de169d523be8caffe1f2891/9efac9056de169d523be8caffe1f2891.png?_i=AA 300w)
読み物系のサイトとそうじゃないサイトでは、フォント指定のこだわりが違いそうですね。
基本私の端末では、日本語は、Hiragino Kaku Gothic Proもしくは、Hiragino Kaku Gothic ProNで表示されていることがわかりました。
フォント1つとってもサイトによってこれだけ異なるのですからすごいですね。
それでは。