【CSS】font-family の使い方、font-familyの一覧、おすすめの設定例は？｜HTML＆CSS入門講座（９）のPodcast
下記のPodcastは、Geminiで作成しました。
ストーリーブック
はじめに
ウェブデザインにおけるタイポグラフィは、単なる視覚的な装飾を超え、情報の伝達効率やユーザーのブランドに対する信頼性に直結する極めて重要な要素です。CSSの font-family プロパティは、テキストを表示する際のフォントを指定するための基本的な手段ですが、その背後には各オペレーティングシステム（OS）のフォントレンダリングの仕組み、ブラウザの互換性、 translucent デバイスごとの搭載フォントの違いといった複雑な背景が存在します。2025年から2026年にかけて、特にWindows環境における標準日本語フォントの劇的な変化や、バリアブルフォント（可変フォント）の普及により、最適な指定方法は新たな局面を迎えています 。本レポートでは、最新のウェブ標準とデバイス環境に基づき、初心者の方からプロフェッショナルなウェブ制作者までが活用できる font-family の知識を体系的に解説します。単なる使い方の説明にとどまらず、パフォーマンスへの影響やアクセシビリティ、さらには最新のOSアップデートに伴うレンダリング上の課題に至るまで、深く洞察していきます。
font-family プロパティの基礎と基本原則
font-family プロパティの主な役割は、特定の要素内のテキストに使用するフォントの優先順位リストを定義することです。ウェブサイトの製作者が意図したフォントがユーザーの端末にインストールされていない場合を想定し、複数のフォントを「フォントスタック」として記述します 。ブラウザは指定されたリストを左側から順に確認し、最初に利用可能であったフォントを採用してテキストをレンダリングします 。
記述の基本ルールと構文
CSSでフォントを指定する際には、以下の構文が標準的です。
css
selector {
font-family: "優先フォント", "第2候補", "第3候補", 総称ファミリー;
}この記述において、フォント名にスペースが含まれる場合（例: "Times New Roman"）や、日本語のフォント名（例: "メイリオ"）を使用する場合は、必ず引用符で囲む必要があります 。一方で、スペースを含まない英字フォント名や、後述する「総称ファミリー」のキーワードは引用符で囲まないのが一般的です。
フォント選択のメカニズムは、単一の要素全体に適用されるだけでなく、文字単位で行われます。例えば、優先リストにある最初のフォントが英数字のみを含み、日本語のグリフを持たない場合、ブラウザはその英数字のみを最初のフォントで表示し、日本語部分はリストの次以降にあるフォントから探し出します 。この特性を利用して、英数字にはこだわりの欧文フォントを当て、日本語部分には視認性の高い和文フォントを当てるという手法が広く用いられています 。
総称ファミリーの役割と最新の仕様
総称ファミリー（Generic Family）は、特定の具体的なフォント名ではなく、フォントの形状的特徴に基づいたカテゴリーを指定するキーワードです。これはフォントスタックの最後に必ず記述すべき「フォールバック（代替）の終着点」として機能します 。現在のCSS Fonts Module仕様では、従来の基本的な5つに加え、モダンなUI設計に対応した新しいキーワードが定義されています.
| 総称ファミリー | 特徴と視覚的効果 | 代表的なフォント例 |
|---|---|---|
| sans-serif | 飾りのない直線的な書体（ゴシック体）。画面上での可読性が高く、モダンな印象。 | Arial, Helvetica, 游ゴシック, メイリオ |
| serif | 文字の端に飾り（セリフ）がある書体（明朝体）。高級感や伝統を感じさせる。 | Times New Roman, Georgia, 游明朝 |
| monospace | 文字幅が一定の等幅フォント。コード表示やデータの整列に適している。 | Courier New, Consolas, Monaco |
| cursive | 手書き風や筆記体の書体。デザインのアクセントに使用。 | Brush Script MT, Apple Chancery |
| fantasy | 装飾的で装飾性が高い書体。見出しやロゴ等に使用。 | Papyrus, Impact |
| system-ui | 各OSの標準的なUI用フォント。ネイティブアプリのような体験を提供。 | San Francisco (Mac), Segoe UI (Windows) |
| ui-sans-serif | システム標準のサンセリフ書体。内部的に system-ui と同様の動作 | |
| math | 数式表示に最適化されたフォント。数学記号や上付き文字の調整済みフォント |
特に system-ui は、2025年現在、主要なブラウザすべてでサポートされています。これは、デバイスのネイティブな操作感とウェブコンテンツを統合したい場合に非常に有効ですが、MDNのドキュメントによれば、このような長文テキストの組版には、依然として sans-serif などの汎用フォントファミリーを指定することが推奨されています。
2025年から2026年にかけての主要OS標準フォントの変化
ウェブ制作の現場において、各OSにプリインストールされているフォントを把握することは、ページ読み込み速度の向上と安定したデザイン維持のために不可欠です。
Windows 環境における Noto Sans JP の標準搭載
Windows 11における最大の転換点は、2025年4月のシステムアップデートにより「Noto Sans JP（Noto Sans Japanese）」が標準搭載されたことです 。これまで Noto Sans JP を使用するためには、Google Fonts 等を介して数メガバイトのウェブフォントを読み込む必要があり、パフォーマンス面での障壁となっていました。しかし、標準搭載化により追加のデータ転送なしで高品質なゴシック体を利用可能になりました 。
一方で、Windows版の Noto Sans JP はバリアブルフォント（可変フォント）形式で提供されており、特定の環境下（特に低DPIのディスプレイや一部の古いレンダリングエンジン）において、文字がかすれて見えたり、太字（Bold）の指定が正しく反映されなかったりする不具合が報告されています 。このため、業務レベルのウェブ制作では、メイリオを後方に配置するなどの慎重なフォントスタック設計が求められます 。
macOS と iOS の標準フォント
Apple製品は一貫して高品質なタイポグラフィを提供しており、日本語フォントとしては「ヒラギノ角ゴ」がその中心を担います。
| デバイス | 標準欧文フォント | 標準和文フォント | 備考 |
|---|---|---|---|
| macOS | San Francisco, Helvetica Neue | ヒラギノ角ゴ (Hiragino Sans) | 非常に高い可読性と美しさを誇る。 |
| iPhone / iPad | San Francisco | ヒラギノ角ゴ (Hiragino Sans) | iOS 18以降でも標準。 |
macOSおよびiOSでは、CSSにおいて Hiragino Sans や Hiragino Kaku Gothic ProN と明示的に指定することが推奨されます。特に Hiragino Sans はウェイト（太さ）のバリエーションが豊富であり、モダンなデザインを構築する上で欠かせない存在です 。
Android のフォント環境
Androidはオープンソースであるため、メーカーごとに搭載フォントが異なりますが、Googleが提供する標準仕様では Roboto（欧文）と Noto Sans JP（和文）が採用されています 。Android環境においては、特定のフォント名を指定するよりも、最終的に sans-serif という総称ファミリーに任せることで、OSが最適なフォントを自動選択するように設計するのが一般的です 。
推奨されるフォントスタックと設定例
現代のウェブデザインにおいて、パフォーマンス、美しさ、互換性のバランスを考慮した最適な設定例を紹介します。
汎用ゴシック体スタック（2026年標準）
ビジネスサイトやニュースメディアなど、あらゆる用途で「失敗しない」最も推奨される指定です。
css
body {
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
"Noto Sans JP",
Meiryo,
sans-serif;
}このスタックの設計思想は以下の通りです。まず、英数字の表示を美しくするために Helvetica Neue と Arial を最優先にします 。次に、MacおよびiOS環境で最も美しく表示されるヒラギノ系を配置します。Windows 11ユーザー向けには、新しく搭載された Noto Sans JP を指定し、最後に古いWindows環境をカバーするために Meiryo を記述します 。この順序により、どのデバイスでもその環境における「最高クラスの可読性」が担保されます。
高級感を演出する明朝体スタック
小説の本文や、老舗ブランドの紹介ページなど、落ち着いた雰囲気を提供したい場合の設定です。
css
body {
font-family:
"Times New Roman",
"Yu Mincho",
"YuMincho",
"Hiragino Mincho ProN",
serif;
}明朝体の場合、WindowsとMacの両方に搭載されている「游明朝」を優先するのが、OS間での視覚的一致を得るための定石です 。
ウェブフォントの最適化とパフォーマンス管理
システムフォントだけではブランドの独自性を表現しきれない場合、Google Fonts などのウェブフォントを利用します。しかし、日本語ウェブフォントはファイルサイズが膨大であるため、戦略的な導入が必要です。
読み込み速度を向上させる技術
ウェブフォントの導入によるページ遅延を防ぐために、以下の手法が推奨されます 。
font-display: swap: フォントが読み込まれるまでの間、一時的に代替フォントでテキストを表示させます。これにより「文字が何も表示されない時間」が発生するのを防ぎます 。
サブセット化: 使用する可能性のある数千文字の中から、常用漢字や平仮名など、特定の文字だけを抽出したフォントファイルを作成します。これによりデータサイズを大幅に削減可能です 。
プリロード: HTMLの `<link rel="preload">` タグを使用して、ブラウザがCSSを解析し終わる前にフォントのダウンロードを開始させます 。
レイアウトシフト（CLS）の抑制
フォントが代替フォントからウェブフォントへと切り替わる際、文字の高さや幅の差によってコンテンツの位置がずれる「レイアウトシフト」が発生することがあります。これはGoogleのCore Web Vitalsにおいて「CLS」という指標で評価され、検索順位にも影響します 。最新のCSSでは、ascent-override や size-adjust といった記述子を用いることで、代替フォントのメトリクス（サイズ感）をウェブフォントに合わせ、切り替え時のズレを最小限に抑えることが可能です 。
バリアブルフォント（可変フォント）の進化と注意点
バリアブルフォントは、単一のフォントファイルの中に「太さ（Weight）」「斜体（Slant）」「幅（Width）」といった複数の軸を保持できる技術です 。従来のスタティックフォント（静的フォント）がウェイトごとに個別のファイルを用意していたのに対し、バリアブルフォントは一つのファイルで無段階の調整が可能です 。
バリアブルフォントのメリットと実装
css
@font-face {
font-family: "MyVariableFont";
src: url("font-var.woff2") format("woff2-variations");
font-weight: 100 900; /* 太さの範囲を指定 */
}
h1 {
font-weight: 750; /* 自由な数値を指定可能 */
}バリアブルフォントは、複数のウェイトを読み込む場合に比べてトータルのファイルサイズを削減できる傾向にあります。しかし、前述のWindows版 Noto Sans JP のように、レンダリングエンジンの不具合により「常にThin（細字）で表示される」といったトラブルも散見されるため、実装後の実機確認が極めて重要です 。
2026年のトレンド：デザインとアクセシビリティの融合
ウェブフォントの選択は、単なる美学ではなくアクセシビリティの観点からも評価されるべきです。
視認性の高いユニバーサルデザイン（UD）フォント
高齢者や視覚障害を持つユーザーにとって、文字の「ふところ」が広く、濁点や半濁点が見分けやすいUDフォントの採用は非常に有効です。Windows 10/11に標準搭載されている BIZ UDPGothic は、学術的にも可読性が証明されたフォントであり、公共性の高いサイトでの採用が増えています 。
絵文字のスタイル制御
ウェブサイト内で絵文字をどのように表示させるかも、font-family と関連する重要な要素です。font-variant-emoji プロパティを使用することで、絵文字を「テキストスタイル」で表示するか、それともデバイス特有の「グラフィックスタイル」で表示するかを明示的に指定できます 。
css
.emoji-text {
font-variant-emoji: text; /* 記号的な表示 */
}
.emoji-graphic {
font-variant-emoji: emoji; /* フルカラーの表示 */
}初心者が陥りやすい典型的な間違いと対策
font-family の設定において、よくあるミスを整理します。
フォント名のスペルミス: 特に日本語フォント名を英字で書く場合（例: Meiryo vs Meiryou）は、正確な名称を確認する必要があります 。
優先順位の誤り: 日本語フォントを欧文フォントより先に書くと、英数字も日本語フォントのグリフが使われてしまいます。「欧文フォントを先に、和文フォントを後に」が鉄則です 。
引用符の不適切な使用: font-family: "sans-serif"; と書いてしまうと、ブラウザは「sans-serifという名前の特定のフォント」を探してしまい、総称ファミリーとしての機能が失われます 。
検証不足: 自分のPCで見えているからといって、スマホや他のOSで正しく表示されているとは限りません。特に2025年以降のWindowsにおける Noto Sans JP のレンダリング問題は、開発者ツールだけでは発見しにくい不具合の一つです 。
結論と今後の展望
font-family プロパティの使いこなしは、ウェブ技術の進化とともに、より高度な最適化と深い理解が求められるようになっています。2026年に向けたウェブ制作においては、従来のシステムフォントスタックを基本としつつ、標準搭載された Noto Sans JP を活用し、必要に応じてバリアブルフォントやUDフォントを戦略的に組み合わせる柔軟性が重要です。また、フォントの選択は表示速度（LCP）や視覚的安定性（CLS）といったウェブパフォーマンス指標に直結します。デザインの美しさだけでなく、ユーザーがストレスなくコンテンツに到達できる「速く、安定し、読みやすい」テキスト環境を構築することが、ウェブ制作者に課せられた真の役割といえるでしょう。
参考資料
1. CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/generic-family
2. font-variant-emoji - CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-emoji
3. font-family - CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family
4. Font Family Utilities - Total WP Theme, https://totalwptheme.com/css-framework/font-family/
5. The System Font Stack - CSS-Tricks, https://css-tricks.com/snippets/css/system-font-stack/
6. Common fonts for all versions of Windows & Mac, https://web.mit.edu/jmorzins/www/fonts.html
7. Common Fonts for Windows and Mac - Coderwall, https://coderwall.com/p/57imrw/common-fonts-for-windows-mac
8. 5 Best Fonts for Mobile Apps in 2025 - Din Studio, https://din-studio.com/5-best-fonts-for-mobile-apps/
9. Required Microsoft fonts - Microsoft Q&A, https://learn.microsoft.com/en-us/answers/questions/3859745/required-microsoft-fonts
10. List of typefaces included with Microsoft Windows - Wikipedia, https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
11. 2025年・2026年におすすめの日本語フォントスタック, https://e-adshin.com/adlab/13831
12. おすすめ日本語フォント10選 - HumHum, https://humhum.co.jp/4931/
13. 31 Web Safe Fonts to Use in Your Next Project, https://kinsta.com/jp/blog/web-safe-fonts/
14. 2025年版：無難なフォント指定「font-family」の決定版, https://ics.media/entry/200317/
15. Best Google Fonts for 2026, https://kinsta.com/jp/blog/best-google-fonts/
16. Bizzdesign Horizzon Release Notes 2025 (Noto Sans JP confirmation), https://help.bizzdesign.com/articles/horizzon-help/bizzdesign-horizzon-release-notes-2025
17. Variable Font Noto Sans JP Not Displaying Correctly - Adobe Community, https://community.adobe.com/t/supp-photoshop-ecosystem-discussions/variable-font-noto-sans-jp-not-displaying-correctly/td-p/15245729
18. Photoshop 2025 Text Tool Issues, https://community.adobe.com/t/supp-bug-photoshop/p:-ps-v26-some-text-layers-might-need-to-be-updated-before-they-can-be-used-for-vector-based-output/idi-p/15216401
19. Elementi release notes 2025, https://support.spinetix.com/wiki/Elementi_release_notes
20. Chromium Issues: Default CJK fonts changed to Noto, https://issues.chromium.org/issues/361595063
21. Format Chinese, Japanese, or Korean text on Mac - Apple Support, https://support.apple.com/guide/pages/format-chinese-japanese-or-korean-text-tanfbd4156e/mac
22. Fonts included with macOS Sequoia - Apple Support, https://support.apple.com/en-us/120414
23. If non-Latin fonts don't appear correctly on Mac - Apple Support, https://support.apple.com/en-bn/guide/mac-help/mchl14cc6599/mac
24. List of typefaces included with macOS - Wikipedia, https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
25. PSA: Mac/iOS default font for Japanese Kanji - Reddit, https://www.reddit.com/r/LearnJapanese/comments/10xgzqp/psa_if_youre_on_macios_youre_also_likely_using/
26. WebKit Bug 283393 - iOS 18: CJK characters appear bold, https://bugs.webkit.org/show_bug.cgi?id=283393
27. Format Chinese, Japanese, or Korean text on iPhone - Apple Support, https://support.apple.com/guide/pages-iphone/format-chinese-japanese-or-korean-text-tanfbd4156e/ios
28. Support for iOS 18 System Fonts in Anki, https://forums.ankiweb.net/t/suggestion-support-for-ios-18-system-fonts-in-anki-ios-version/49576
29. iPhone Japanese font changed after iOS update - Apple Discussions, https://discussions.apple.com/thread/252988931
30. Recommended Font Stacks 2026 - Kinsta, https://kinsta.com/jp/blog/web-safe-fonts/
31. ホテル・旅館向けおすすめフォント 2025-2026, https://nextage-tech.com/blog/2025/06/17/post-1111/
32. font-display: swap and performance | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-display
33. You’re loading fonts wrong - Jono Alderson, https://www.jonoalderson.com/performance/youre-loading-fonts-wrong/
34. Web Font Layout Shift - DebugBear, https://www.debugbear.com/blog/web-font-layout-shift
35. The Impact of Font Loading Strategies on Website Performance, https://mukulchugh.com/blog/dont-let-fonts-slow-you-down-the-impact-of-font-loading-strategies-on-website
36. Noto Sans JP rendering issues on Windows (Bug 1974034) - Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=1974034
37. Noto Sans JP font unrecognized in Adobe Acrobat, https://community.adobe.com/t/supp-acrobat-discussions/noto-sans-jp-font-unavailable-or-not-recognized-in-adobe-acrobat-when-convert-from-ppt-to-pdf-file/td-p/15371724
38. Variable Font Noto Sans JP Photoshop Bug, https://community.adobe.com/t/supp-photoshop-ecosystem-discussions/variable-font-noto-sans-jp-not-displaying-correctly/td-p/15245729
39. Windows 11 font fallback not working, https://learn.microsoft.com/en-us/answers/questions/4137072/windows-11-fallback-font-not-working
40. Font issue with 2026 software - Autodesk Community, https://forums.autodesk.com/t5/civil-3d-forum/font-issue-with-2026/td-p/13784071
41. Top 10 Google Fonts for 2026, https://kinsta.com/jp/blog/best-google-fonts/
42. おすすめ日本語フォント10選と特徴解説, https://humhum.co.jp/4931/
43. 5 Common Mistakes When Choosing a Font, https://www.storeycreative.com/5-common-mistakes-you-can-avoid-when-choosing-a-font/
44. 8 Simple Ways to Improve Typography, https://www.smashingmagazine.com/2009/04/8-simple-ways-to-improve-typography-in-your-designs/
45. 5 Graphic Design Mistakes I Fixed in 2026, https://medium.com/write-a-catalyst/5-common-graphic-design-mistakes-i-made-as-a-beginner-and-how-i-fixed-them-in-2026-ce596cfa65d5
46. Deep Dive into CSS font-family - All Things Programming, https://allthingsprogramming.com/css-font-family/
47. 2026年におすすめのお洒落フォント56選, https://kinsta.com/jp/blog/modern-fonts/
48. Variable Fonts Guide | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts
49. CSS Fonts Module and Variable Fonts | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts
50. How to embed custom fonts with @font-face, https://penpot.app/blog/embed-custom-fonts-font-face-css/
51. Beginner's Guide to Variable Fonts, https://www.viget.com/articles/beginners-guide-to-variable-fonts-2
52. Best HTML Fonts for a Modern Website in 2026, https://elementor.com/blog/best-html-fonts-to-use-for-a-modern-website/
53. Generic Font Families - CSS | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/generic-family
54. Tailwind CSS Font Family documentation, https://kombai.com/tailwind/font-family/
55. 4 CSS features for front-end developers in 2026, https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026
コメント