サイトを構築するときに毎回迷うのが「CSSでのfont-family」選びではないでしょうか！？MAC&WINの各OS、各ブラウザで、ある程度のクオリティーを維持する設定とはなんぞや！？
多少、読み込み表示スピードや以後のメンテナンス性に問題が生じても「WEBフォント」にするのか！？
ん〜〜悩みだしたらキリがありません。
そんなときは、有名サイトを参考にさせてもらって、今作っているサイトのペルソナを意識して、サイト構築の優先順をはっきりさせれば、自ずと答えは導かれると思います。
この記事では、有名な企業サイトやブログを中心にcssの「font-family設定」を集めてみました。
多くの悩めるデザイナーのお役に1ミリでもたてれば幸いです。
目 次
- 1 有名サイトのフォントファミリー一覧
- 1.1 LIG
- 1.2 任天堂
- 1.3 MdN
- 1.4 無印良品
- 1.5 snow peak
- 1.6 JAL企業サイト
- 1.7 ANA企業サイト
- 1.8 ニトリ企業サイト
- 1.9 積水化学
- 1.10 トヨタ企業サイト
- 1.11 日産企業サイト
- 1.12 スバル企業サイト
- 1.13 積水化学
- 1.14 カルビー
- 1.15 ミツカンmizkan
- 1.16 キューピー
- 1.17 味の素
- 1.18 タニタ
- 1.19 マクドナルド
- 1.20 キューピー
- 1.21 日本ピスコ
- 1.22 バッファロー
- 1.23 team Lab
- 1.24 サルワカ
- 1.25 Qiita
- 1.26 note
- 1.27 manablog
- 1.28 All About
- 1.29 lifehacker
- 1.30 WIRED日本語版
- 1.31 CNET Japan
- 1.32 GIZMODO（ギズモード・ジャパン）
- 1.33 MERY（メリー）
- 1.34 ハウコレ
- 1.35 IT media
- 1.36 ねとらぼ
- 1.37 Yahoo! JAPAN
- 1.38 メルカリ
- 1.39 楽天市場
- 1.40 首相官邸ホームページ
- 1.41 外務省
- 1.42 産経ニュース
- 1.43 ユニクロ
- 1.44 ビームス
- 1.45 ミミヨリ
有名サイトのフォントファミリー一覧
LIG
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;任天堂
font-family: YakuHanJPs, Roboto, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, nc3Jp, sans-serif !important;MdN
https://developer.mozilla.org/ja/docs/Web
font-family: BlinkMacSystemFont,Roboto,"Segoe UI","Helvetica Neue",HelveticaNeue,YuGothic,"Yu Gothic Medium","Yu Gothic",Verdana,Meiryo,sans-serif;
無印良品
https://www.muji.com/jp/ja/store
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic, 'MS PGothic', Osaka, arial, sans-serif;snow peak
font-family: sans-serif;JAL企業サイト
font-family: -apple-system, BlinkMacSystemFont, 'FP-HiraginoUDSansStdN-W4',"Frutiger Neue LT W1G","\30D2\30E9\30AE\30CEUD\2F93\30B4 Std", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif;ANA企業サイト
font-family: "icomoon","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ","ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;ニトリ企業サイト
font-family: 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;積水化学
font-family: "Noto Sans JP", YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;トヨタ企業サイト
font-family: YuGothic,"Yu Gothic","游ゴシック体","游ゴシック","Hiragino Kaku Gothic ProN","HiraKakuPro-W3","メイリオ",Meiryo,Verdana,sans-serif;日産企業サイト
https://www.nissan-global.com/JP/
font-family: "NissanPro", "Helvetica Neue", Arial, "Noto Sans CJK JP" ,"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;スバル企業サイト
font-family: "Noto Sans Japanese","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ",Verdana,sans-serif;
積水化学
font-family: "Noto Sans JP", YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;カルビー
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "メイリオ", sans-serif;ミツカンmizkan
font-family: Lato,Hiragino Kaku Gothic ProN,Yu Gothic,Noto Sans CJK JP,Hiragino Sans,sans-serif!important;キューピー
font-family: "Roboto", "YakuHanJP", "BaseFont-JP", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;味の素
font-family: UD新ゴ R,メイリオ,Meiryo,Hiragino Kaku Gothic Pro,ヒラギノ角ゴ Pro W3,Arial,Verdana,ＭＳ Ｐゴシック,Lucida Grande,Lucida Sans Unicode,Segoe UI Emoji,Segoe UI Symbol,Apple Color Emoji,Noto Color Emoji,Noto Emoji,sans-serif;タニタ
font-family: noto-sans-cjk-jp, sans-serif;マクドナルド
font-family: Hiragino Sans,Noto Sans JP,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif;キューピー
font-family: "Roboto", "YakuHanJP", "BaseFont-JP", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;日本ピスコ
font-family: 'Noto Sans JP', sans-serif;バッファロー
font-family: YakuHanJP,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Yu Gothic local","Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;team Lab
font-family: Helvetica,Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック','Yu Gothic',YuGothic,Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS P Gothic',sans-serif;サルワカ
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;Qiita
font-family: "YakuHanJPs","-apple-system","BlinkMacSystemFont","Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;note
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"manablog
font-family: Noto,Hiragino Sans,Helvetica,Arial,sans-serif;All About
font-family: "メイリオ",Meiryo,YuGothic,"游ゴシック","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;lifehacker
font-size: 16px;
font-family: Hiragino Kaku Gothic Pro,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,メイリオ,sans-serif;
line-height: 1.6;WIRED日本語版
font-family: "Helvetica Neue",Helvetica,Arial,YuGothic,"Yu Gothic",游ゴシック体,游ゴシック,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,"MS ゴシック","MS Gothic",sans-serif;
font-weight: 400;CNET Japan
font: 14px "Meiryo UI", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", Yu Gothic Medium, YuGothicM, "游ゴシック体", YuGothic, sans-serif;GIZMODO（ギズモード・ジャパン）
font-family: -apple-system,BlinkMacSystemFont,Roboto,"游ゴシック体",YuGothic,"Yu Gothic Medium",sans-serif;MERY（メリー）
font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;ハウコレ
font-family: Meiryo,"メイリオ","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Lucida Grande","ＭＳ Ｐゴシック",sans-serif;IT media
font-family: Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';ねとらぼ
font-family: BIZ UDPGothic,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","メイリオ",Meiryo,Helvetica,Arial,sans-serif;Yahoo! JAPAN
font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;メルカリ
font-family: Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;楽天市場
font-family: "Meiryo","Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
color: #666;首相官邸ホームページ
font-family: "Noto Sans JP","HiraKakuPro",-apple-system,"Lucida Grande","Helvetica Neue","メイリオ",meiryo,"Hiragino Kaku Gothic ProN",sans-serif;外務省
font-family: 'Hiragino Kaku Gothic ProN',Meiryo,arial;産経ニュース
font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Pgothic",Osaka,sans-serif,Helvetica,Helvetica Neue,Arial,Verdana;ユニクロ
font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,Hiragino Sans,Noto Sans CJK JP,Osaka,Meiryo,メイリオ,MS PGothic,ＭＳ Ｐゴシック,YuGothic,Yu Gothic,Hiragino Sans GB,Helvetica Neue,HelveticaNeue,Helvetica,Noto Sans,Roboto,Arial,Arial Unicode MS,sans-serif;ビームス
font-family: 'Hiragino Kaku Gothic Pro', 'メイリオ', 'ＭＳ Ｐゴシック', -apple-system, BlinkMacSystemFont, sans-serif;ミミヨリ
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","Hiragino Sans","メイリオ",Meiryo,Arial,"Helvetica Neue",sans-serif;
関連・おすすめ記事
| プロのWEBデザイナーが使う「シンプル囲み罫・囲み枠・ボックス！」コピペサンプル集 | TransmitMailをWordPress5.5でv2.6にバージョンアップする際のポイント・注意点・変更箇所 |
コメント