2022年に最適なfont-familyの書き方 - ICS MEDIA

ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,

[yoshi-na]

游字体の代わりにNotoをWinもMacも搭載してくれないものか…

[yellowmikan]

このサイトの見出し、日本語に対して英数字が異様に細くてフォント指定がちゃんとできてないと思うのは私だけかな（Android環境です）/太く修正された！GJ

[terencow]

ここ2,3日だと思うんだけど、増田のfont-familyに「system-ui」が追加されてYu Gothic UIで表示されるようになった。見出しならまだしも、本文にUIフォント組まれると読む気しないので勘弁してほしい

[forestk]

正直 iOS で2年、macOS で1年しかなかった Helvetica Neue の時代は黒歴史だと思っています＞“San Francisco登場前はHelvetica NeueがmacOS標準の欧文フォントだったので、大多数から受け入れられるはずです。”

[chiba1008]

もうどうでもよくなってきた…

[yasu-log]

ちょろっと記事をみるときに、ウェブフォントが数MBもダウンロードされるのはギガを圧迫して辛い。読み込み速度はモバイルの5G通信で解決するか（5Gも初期は期待できないという話もあるが）

[nijitaro]

サイト単体で考えれば変化しないのが正しいかもしれないが、他サイトなどと相対的にみるとある程度同じように変化していくことを受容できるのが一番いいと思うからベースは "Hiragino Sans", sans-serif にしている。

[hamaco]

ふぉんとうにめんどくさいな

[arapro]

画像化する（暴論）

[wumf0701]

ここに来てメイリオ入れるとか絶対嫌マン。

[sisicom]

ぶらうざやOSごとに違いがあるのでしょうがないけど、ある程度PCに任せラレルといいんだけどね。WindowsのUDPゴシックは使うのよいと思う

[soratomo]

“従来は-apple-systemには欧文フォントのみがSan Franciscoが割り当てられていたものの、現在では和文にヒラギノ書体（それも通常より1px程度小さい特殊なヒラギノ書体）が適用されるようになりました。”

[secseek]

sans-serifで明朝体が表示されるのはひどすぎますね。もうなにも信じない！って感じです。とにかく速さを求めるのでなければウェブフォントで攻めた方がよさそうな感じです

[klim0824]

"※ 2020年の記事公開時はfont-weight: 600;で対策する方法を紹介していました。ただ、Android OS（日本語）では太字が表示されない現象があったため、現在はfont-weight: bold;のほうが望ましいです。"

[fuyu77]

Meiryo微妙で変えようと思ったけれど、もしかしてWindowsっていい感じにお洒落に表示できる日本語ゴシックフォントが存在しない…？

[taetae109]

日本語ウエブフォントは重くて非推奨なのか。

[nkjm24]

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

[tmatsuu]

“多くのウェブ制作者にとっての最大公約数”なるほど

[k_ume75]

ほんまめんどくさい！！！（泣）最適解を探って色々試したけど、もうどーでもいい...

[ku_marin]

sans-serifだけで事足りるようになるはずって思ってたんだけどそんなことには全然ならない未来…

[shimooka]

闇が深すぎて面倒くさそう

[misarine3]

フォント周りに強くないディレクターだと絶対游ゴシックにするんだマンとかNoto信者とかが頻発してるので指定したいならちゃんと勉強してこいと言いたいが言えないチキンコーダーです。

[laptice]

デフォルトフォントですらOSやブラウザのバージョンによって表示が崩れうるという話。Noto SansとかM-plusとかがOSにデフォで入ってくれんかなー。

[yarumato]

“macOS Mojave(2018)はフォントが細く見える（サブピクセル->グレースケール変更）ので細いウェイトは避ける。游ゴシック体はWindowsではかすれる、macOSでは未収録（追加可）、iOS/iPadOSで未収録。iOS 13で極端に太いbold表示”

[burnworks]

「男は黙って font-family: sans-serif;」って冗談ぽくコメントしようと思ったら記事内でちゃんと書かれてた

[fut573]

ウェブフォントはcdnから読ませればうちに来る前に既に読んでいるだろう派

[sucelie]

めんどくさいからwebフォント版のNotoをメインにしてる

[gerakoma]

日本語って文字多いからWEBフォントに適してないの、とても不幸。英字に比べて重いし、作り手も大変でなんだかなあ。こればっかりはどうしようもないけど。

[MasashiCato]

読み物なら標準フォントでいいし、ゴリゴリにデザインされたプロモーション色強いサイトなら埋め込むか

[ultimatebreak]

形は悪くないのにWinで細すぎてクソ認定されてしまったかわいそうな游ゴシック。今まで一度も入れたことがない

[ko-ya-ma]

Androidも含めて自分で検証しておくべきか

[dlive1]

Googleの推奨は1ページあたり1.6MBとされているので（参照）、ウェブフォントを導入すればすぐに推奨容量を超え

[wakuworks]

結論: 面倒くさい

[ghostbass]

游ゴシックはクロームで読めないくらいかすれる、IEで配置がおかしいetc,...により全く使う気がない。メイリオはそこそこだけど斜体がない。

[richard_raw]

游ゴシックは読み辛くてびっくりしましたよね……。

[hachibeechan]

游ゴシックはWinとmacで使えて最高…そう考えていた時代が俺にもありました…

[sigwyg]

font-weight: 600は使いたくないなあ

[kazatsuyu]

今どきOSにインストールされたフォントを当てにするのが間違い。フォントを制御したいなら@font-faceで自分の使いたいフォントを読み込ませるべき（もちろん配布ライセンスを受けているものに限る）