CSS font-family日本語おすすめ指定｜游ゴシック対応コピペ集

CSS の font-family とは、文字を表示するフォントの候補を「使いたい順」に並べて指定するプロパティです。 ブラウザは左から順に、閲覧している端末に入っているフォントを探し、見つかったものを使います。日本語サイトでは、Windows・macOS・iOS・Android で入っているフォントが違うため、OS ごとの候補を1行に並べ、最後に総称ファミリー（sans-serif など）を置くのが基本形です。

この記事では、そのまま貼れる用途別の指定をまず示し、そのあとで「なぜその順番なのか」を OS 別の対応表で説明します。游ゴシックが細く見える理由と直し方、2025年4月の更新から Windows に入った Noto Sans JP の扱い、Web フォントの読み込み方も取り上げます。さらに、指定したフォントのうち実際にどれが使われたかを Chromium 141 と Playwright で取得した結果を載せています。フォント名の確認は公式の一覧（Microsoft Learn、Apple サポート、Apple Developer）で行い、確認日は 2026-10-02 です。

font-family の早見表（用途別コピペ）

まずは結論です。本文用のゴシック体は1行目をそのまま貼れば、主要な OS で読みやすい日本語フォントが当たります。

書き方のルールは次の3つだけ覚えておけば足ります。

font-family の仕組み：左から順に、文字ごとに決まる

候補は「文字ごと」に選ばれる

font-family に並べた候補は、要素全体で1つに決まるのではなく、1文字ずつ「そのフォントにこの文字の形（グリフ）があるか」で判定されます（MDN の font-family の解説で確認）。そのため、英字用フォントを先頭に置くと、英数字は先頭のフォント、日本語は後ろの日本語フォント、という組み合わせになります。

/* 英数字は Arial、日本語は Noto Sans CJK JP で表示される */
p { font-family: Arial, "Noto Sans CJK JP", sans-serif; }

検証環境（Linux、Chromium 141）でこの指定を調べると、次のように2つのフォントが半分ずつ使われていました（この環境では Arial の代わりに同じ字幅の Liberation Sans が当たります）。

Arial, "Noto Sans CJK JP", sans-serif
    -> Liberation Sans(8字), Noto Sans CJK JP(8字)

「日本語のテキスト ABC 123」という16文字のうち、スペースと英数字の8字が欧文フォント、日本語の8字が日本語フォントで描かれています。英字フォントを日本語フォントより前に書くのは、この仕組みを使って英数字の見た目を選ぶための書き方です。逆に日本語フォントを先に書くと、日本語フォントに含まれる英数字が使われます。

総称ファミリーの一覧

総称ファミリーは「具体的な名前ではなく、種類で指定するキーワード」です。どのフォントになるかはブラウザと OS が決めます。

総称ファミリーは必ず末尾に1つ置きます。 並べた具体名がどれも端末に入っていなかったときの受け皿になるからです。

クォートのルール：総称は囲まない

フォント名のクォートには、うっかりしやすい点が1つあります。総称ファミリーを "sans-serif" のようにクォートで囲むと、キーワードではなく「sans-serif という名前のフォント」を探す指定になります。

検証環境で比べた結果です。

sans-serif（クォートなし）
    -> Liberation Sans(8字), WenQuanYi Zen Hei(8字)
"sans-serif"（クォートあり）
    -> Liberation Serif(8字), WenQuanYi Zen Hei(8字)

クォートありのほうは、そういう名前のフォントが見つからないので、ブラウザの既定フォント（この環境では Serif 系）に切り替わりました。ゴシック体のつもりが明朝系で表示される、という現象はこの書き方から起きます。

カンマの打ち忘れは、エラーにならず静かに次の候補へ進むので気づきにくいものです。指定を変えたら、あとで紹介する方法で実際に当たったフォントを確かめておくと安心です。

OS 別：どのフォントが当たるかの対応表

ここが日本語の font-family でいちばん大事な部分です。各 OS に最初から入っている日本語フォントは次のとおりです。

表の読み方を補足します。

• Windows の Meiryo・BIZ UD 系・Yu Mincho は、Microsoft Learn の一覧では「Japanese Supplemental Fonts（日本語の追加フォント）」に分類されています。日本語を表示言語にしている Windows には入っていますが、他の言語で使っている Windows には入っていない場合があります。Yu Gothic と MS Gothic は言語を問わず入る基本の一覧にあります。
• Windows の Noto Sans JP / Noto Serif JP は、Microsoft Learn の一覧ページ（最終更新 2022年6月）にはまだ載っていません。Windows Insider Blog の 2025年3月13日の記事（Windows 11 Build 22631.5116）に「中国語・日本語・韓国語の Web 閲覧の文字品質を高めるために Noto フォントファミリーを導入する」という内容の記載があることを確認しました。日本語版のファミリー名が「Noto Sans JP」「Noto Serif JP」で、太さを連続的に変えられる可変フォントであること、一般向けには 2025年4月の Windows Update で配信されたことは、制作会社の技術ブログ（ICS MEDIA、窓の杜の報道）の情報で、手元の Windows では未確認です。
• macOS の Hiragino Sans は W0〜W9 の10段階の太さがあります。「Hiragino Kaku Gothic ProN」は以前からある名前で、Hiragino Sans が入る前の macOS でも通じるため、2番目に並べておくと対応範囲が広がります。
• iOS には游ゴシックが入っていません。 iPhone では Hiragino Sans が当たるように、候補に必ず入れておきます。
• Android は CSS から名前で指定できる日本語フォントが限られます。具体名を並べても当たらず、末尾の sans-serif で端末の標準フォントになる、と考えておくと実態に合います。

冒頭のゴシック指定を OS ごとに追う

早見表の1行目が、各 OS でどこまで進むかを順に見ます。

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}

macOS にも游ゴシック（YuGothic）は入っていますが、ヒラギノを先に書いているのでヒラギノが使われます。 游ゴシックを macOS でも使いたい場合は、次の節の指定を使います。

用途別コピペ集

ゴシック体：3つの方針から選ぶ

ゴシック体は、何を優先するかで並べ方が変わります。

/* A. OS ごとに読みやすい標準フォントを使う（おすすめの基本形） */
body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}

/* B. 游ゴシックを macOS と Windows の両方で使う */
body {
  font-family: "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",
               "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
}

/* C. 英数字を欧文フォントにして、日本語は OS の標準フォントにする */
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic Medium", Meiryo, sans-serif;
}

B の「YuGothic」「游ゴシック体」は macOS での名前、「Yu Gothic」「游ゴシック」は Windows での名前です。OS によって同じフォントの名前が違うため、両方を書いておきます。

明朝体

.mincho {
  font-family: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
}

明朝体は細い横線が特徴なので、小さい文字サイズだと画面によっては線がかすれて見えます。本文に使うなら 16px 以上、行間（line-height）は 1.8 前後にすると読みやすくなります。見出しや引用など、文字を大きく使える場所との相性がよい書体です。

なお、末尾の serif が必ず明朝体になるとは限りません。検証環境の Linux では、上の指定の日本語部分に WenQuanYi Zen Hei というゴシック系のフォントが当たりました（結果は後述）。総称ファミリーは「近い種類があればそれを使う」という指定なので、明朝体を確実に出したいときは Web フォントの Noto Serif JP を読み込みます。

丸ゴシック体

.rounded {
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", "BIZ UDPGothic", Meiryo, sans-serif;
}

丸ゴシックは macOS・iOS には入っていますが、Windows の標準フォントには入っていません。全 OS で丸ゴシックにしたい場合は、Google Fonts の「Zen Maru Gothic」や「M PLUS Rounded 1c」などの Web フォントを読み込み、上の指定の2番目に書いた名前で当てます。読み込まない場合は、Windows では BIZ UDPゴシックやメイリオで表示されます。

ui-rounded という総称ファミリーもありますが、検証環境の Chromium 141 では丸ゴシックにはならず、後ろの候補に進みました。先頭に置く場合は、具体名を必ず後ろに続けます。

等幅フォント（コード表示）

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "BIZ UDGothic", "MS Gothic", "Osaka-Mono", monospace;
  font-size: 0.9375em;
}

等幅の指定では、英数字用の等幅フォントを先に、日本語を含む等幅フォントをあとに書きます。Consolas や Menlo には日本語が入っていないので、コード中のコメントの日本語は、後ろの BIZ UDゴシック（「P」が付かないほうが等幅）や MS ゴシックで表示されます。

1つ知っておくと役立つのが、末尾が monospace だけのとき、多くのブラウザは既定の文字サイズを 13px にするという挙動です。Chromium 141 で実測すると、font-family: monospace の code 要素は 13px、font-family: Consolas, monospace と monospace, monospace は 16px でした。上の例のように font-size を明示しておくと、指定の書き換えでサイズが変わることを避けられます。

system-ui 系（OS の UI に合わせる）

.app {
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
               "Noto Sans JP", "Yu Gothic UI", sans-serif;
}

管理画面や Web アプリで、OS の画面と同じ雰囲気にしたいときの指定です。日本語で使うときの注意は、あとの「system-ui を日本語で使うときの注意」にまとめました。

HTML メール・印刷向け

HTML メールは、メールソフトが Web フォントや @font-face に対応していないことが多いので、OS の標準フォントだけを短く並べるのが向いています。

font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

印刷用（@media print）では、明朝体のほうが紙で読みやすい場合があります。印刷専用に明朝体の指定を切り替える書き方もできます。

@media print {
  body { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
}

游ゴシックが細く見える原因と直し方

原因：Windows の游ゴシックは「Regular」が標準の太さに当たる

Windows で font-family: "Yu Gothic" と書くと、文字が細く、色が薄く見えることがあります。これは CSS の書き間違いではなく、OS に入っている太さの種類が macOS と Windows で違うために起こります。

font-weight の標準値は 400 です。Windows には 400 に対応する Regular があるのでそれが選ばれますが、この Regular は印刷向けの細めの設計です。macOS には Regular がないため、いちばん近い Medium が選ばれます。同じ指定で macOS はちょうどよく、Windows は細く見えるのはこのためです。

直し方は3通り

いちばん確実なのは 3 の方法です。 @font-face の src に local() を書くと、「端末に入っているこのフォントを、この名前・この太さとして扱う」という別名を作れます。

/* 游ゴシックの Medium を「標準の太さ」、Bold を「太字」として登録する */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
  font-weight: 100 500;   /* 500 以下の指定はすべて Medium を使う */
}
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: 600 900;   /* 600 以上の指定は Bold を使う */
}

body {
  font-family: "Yu Gothic M", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}

local() に書くのは、フォントファイルの中に記録されている正式な名前です。端末にそのフォントがなければ、この別名は「存在しないフォント」と同じ扱いになり、font-family の次の候補に進みます。

この「見つからなければ次へ進む」動きは、検証環境の Chromium 141 で確かめました。游ゴシックが入っていない Linux で、上と同じ形の別名を先頭に置いた結果です。

@font-face { font-family: "YuGothic M"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); }
@font-face { font-family: "Local Noto"; src: local("Noto Sans CJK JP"), local("Noto Sans JP"); }

"YuGothic M", "Local Noto", sans-serif
    -> Noto Sans CJK JP(16字)
"Local Noto", sans-serif
    -> Noto Sans CJK JP(16字)

1つ目の別名（游ゴシック）は端末にないので飛ばされ、2つ目の別名が端末内の Noto Sans CJK JP に結び付いて、16文字すべてがそのフォントで描かれました。Windows で游ゴシック Medium が実際に選ばれるところは、この記事の検証環境（Linux）では動かせていないため未実行です。Windows の手元で確かめるときは、後述の DevTools の手順を使ってください。

2025年以降の考え方：Windows は Noto Sans JP を先に

2025年4月の更新以降の Windows には Noto Sans JP が入っているため、游ゴシックより前に "Noto Sans JP" を書いておけば、細く見える問題そのものを通らずに済みます。 冒頭の早見表の1行目がこの並びです。更新前の Windows では Noto Sans JP が見つからず、次の "Yu Gothic Medium" に進みます。

Safari は、利用者の追跡を防ぐ目的で local() で参照できるフォントを OS の標準フォントに限っています。macOS・iOS には日本語の Noto が入っていないので、Apple の端末でも Noto Sans JP で表示したい場合は、次に紹介する Web フォントとして読み込みます。

system-ui を日本語で使うときの注意

system-ui は「その OS の画面表示用フォント」を指す総称ファミリーです。英語圏のサイトでは定番ですが、日本語では次の点を知ったうえで使うと安心です。

Windows と Android の行は一般に知られた挙動で、今回の検証環境では動かしていません。最後の行は Chromium 141 で実測した結果です。

system-ui
    -> DejaVu Sans(8字), WenQuanYi Zen Hei(8字)

検証環境には Noto Sans CJK JP が入っていますが、system-ui だけの指定では、OS 側の設定で優先されている別のフォントが使われました。system-ui は「何が当たるかを OS に任せる」指定なので、日本語の長い文章に使うなら、次の2点を合わせて行います。

1. <html lang="ja"> を必ず書く。 漢字は日本語・中国語・韓国語で字形が少しずつ違い、ブラウザは lang 属性を手がかりにフォントを選びます。検証環境で lang を zh-CN に変えると、「直」「骨」の2文字が Noto Sans CJK SC（中国語簡体字用）に切り替わりました。
2. system-ui の後ろに日本語フォントの具体名を続ける。 ただし、system-ui は日本語のグリフも持っていることが多く、後ろの候補まで進まない場合があります。日本語の見た目を優先したいページでは、system-ui を使わずにゴシック体の基本形を使うほうが意図どおりになります。

使い分けの目安は次のとおりです。

フォーム部品は、何も指定しないとブラウザ独自のフォントになります。font-family: inherit を書いておくと、本文と同じ指定がそのまま使われます。

Web フォント：Noto Sans JP の読み込みと font-display

OS ごとの差をなくして同じ見た目にしたいときは、Web フォントを使います。日本語では Noto Sans JP が定番です。

Google Fonts から読み込む

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
}

wght@400;700 は読み込む太さ、display=swap は後述の font-display の指定です。使う太さだけに絞ると、読み込むデータが少なくなります。

自分のサーバーから配信する（Fontsource）

外部のサーバーに頼らず、自分のサイトからフォントを配信する方法です。npm パッケージの Fontsource を使うと、フォントファイルと CSS がまとめて手に入ります。

npm install @fontsource/noto-sans-jp

/* バンドラー（Vite など）を使う場合の読み込み */
@import "@fontsource/noto-sans-jp/400.css";
@import "@fontsource/noto-sans-jp/700.css";

検証環境で @fontsource/noto-sans-jp 5.3.0 の 400.css を読み込み、「日本語のテキスト ABC 123」という1行を表示したときの結果です。

"Noto Sans JP", sans-serif
    -> Noto Sans JP Thin(16字・Web)
downloaded woff2: 5
   noto-sans-jp-118-400-normal.woff2
   noto-sans-jp-117-400-normal.woff2
   noto-sans-jp-119-400-normal.woff2
   noto-sans-jp-latin-400-normal.woff2
   noto-sans-jp-113-400-normal.woff2

16文字すべてが Web フォントで描かれています（表示されている「Noto Sans JP Thin」は、フォントファイルの中に記録されている名前で、実際の太さは 400 です）。注目したいのはダウンロードされたファイル数です。

日本語フォントは文字数が多いので、1ファイルにすると数 MB になります。そこで Noto Sans JP の配信用 CSS は、文字を100以上のグループに分け、@font-face の unicode-range（このファイルが担当する文字の範囲）を使って、ページに出てくる文字を含むファイルだけをブラウザが取りに行くようになっています。Google Fonts も同じ仕組みです。そのため、日本語 Web フォントは見た目のサイズほど重くはなりません。

font-display の選び方

font-display は、Web フォントが届くまでの間、文字をどう表示するかを決める指定です。@font-face の中に書きます。

表の秒数や動きは CSS の仕様で一般に知られている内容で、今回は秒数の実測はしていません。本文には swap、切り替わりによるレイアウトの動きを抑えたいなら optional が選びやすい組み合わせです。

swap では、代わりのフォントから Web フォントに切り替わる瞬間に、文字幅の違いで行の折り返し位置が動くことがあります。font-family の2番目以降に、字幅の近い OS 標準フォント（ヒラギノ、游ゴシック Medium など）を並べておくと、動きが小さくなります。

OS に入っていれば端末のフォントを使う書き方

Windows と Android には Noto Sans 系が入っているので、端末にあればそれを使い、なければ Web フォントを読み込むという指定もできます。

@font-face {
  font-family: "Noto Sans JP Local";
  src: local("Noto Sans JP"), local("Noto Sans CJK JP");
}

body {
  font-family: "Noto Sans JP Local", "Noto Sans JP", "Hiragino Sans", sans-serif;
}

先頭の別名が端末のフォントに結び付けば通信は発生せず、結び付かなければ2番目の Web フォント版 "Noto Sans JP" に進みます。検証環境（Linux）では、この形の別名が端末の Noto Sans CJK JP に結び付くことを確認しました（前の節の「Local Noto」の結果）。端末版と Web フォント版では字詰めなどの細かな機能に違いがある場合があるため、デザインを厳密にそろえたいページでは Web フォントだけを使うほうが見た目がそろいます。

実際に当たったフォントを確かめる方法

font-family は「候補の一覧」なので、書いた内容と実際の表示が一致しているかは、確かめてみるのが確実です。getComputedStyle() で取れる値は書いた指定そのもので、実際に使われたフォントは分かりません。

DevTools の「レンダリングされたフォント」を見る

Chrome・Edge では、次の手順で実際のフォントを見られます。

1. 調べたい文字を右クリックして「検証」を選ぶ
2. 「要素（Elements）」パネルの右側で「計算済み（Computed）」タブを開く
3. いちばん下までスクロールし、「レンダリングされたフォント（Rendered Fonts）」を見る

「ファミリー名」「ローカル ファイル／ネットワーク リソース」「グリフ数」が表示されます。日本語と英数字で別のフォントが使われていれば、複数行で表示されます。

Playwright で自動的に取得する

同じ情報は、Chromium の開発者向けの通信手段（Chrome DevTools Protocol、CDP）の CSS.getPlatformFontsForNode で取得できます。次のスクリプトは、そのまま保存して実行できます。

# rendered_fonts.py  実行: python3 rendered_fonts.py
# 前提: pip install playwright（Chromium 導入済み）
import asyncio
from playwright.async_api import async_playwright

HTML = """<!doctype html><html lang="ja"><meta charset="utf-8">
<p id="gothic" style='font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif'>日本語のテキスト ABC 123</p>
<p id="mincho" style='font-family:"Hiragino Mincho ProN","Noto Serif JP","Yu Mincho",serif'>日本語のテキスト ABC 123</p>
<p id="ui" style='font-family:system-ui,sans-serif'>日本語のテキスト ABC 123</p>"""

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.set_content(HTML)
        await page.evaluate("document.fonts.ready")
        cdp = await page.context.new_cdp_session(page)
        await cdp.send("DOM.enable")
        await cdp.send("CSS.enable")
        root = (await cdp.send("DOM.getDocument"))["root"]["nodeId"]
        for sel in ["#gothic", "#mincho", "#ui"]:
            node = await cdp.send("DOM.querySelector", {"nodeId": root, "selector": sel})
            res = await cdp.send("CSS.getPlatformFontsForNode", {"nodeId": node["nodeId"]})
            used = ", ".join(f'{f["familyName"]}: {f["glyphCount"]}字' for f in res["fonts"])
            print(f"{sel:8s} -> {used}")
        await browser.close()

asyncio.run(main())

実行結果（Playwright 1.56.0、Chromium 141.0.7390.37、Linux）：

#gothic  -> Liberation Sans: 8字, WenQuanYi Zen Hei: 8字
#mincho  -> Liberation Serif: 8字, WenQuanYi Zen Hei: 8字
#ui      -> DejaVu Sans: 8字, WenQuanYi Zen Hei: 8字

この結果から、次のことが読み取れます。

• 検証環境の Linux には、ヒラギノ・游ゴシック・メイリオ・Noto Sans JP（この名前のもの）が入っていないので、3つとも末尾の総称ファミリーまで進んだ
• 英数字は総称ごとに違うフォント（Liberation Sans / Liberation Serif / DejaVu Sans）になったが、日本語はどれも同じ WenQuanYi Zen Hei が当たった。明朝体の指定でも、日本語部分はゴシック系で表示されている
• この環境には Noto Sans CJK JP と Noto Serif CJK JP が入っているが、名前が「Noto Sans JP」ではないため、候補にはかからなかった

Linux でも意図したフォントを当てたい場合は、その環境での名前を候補に加えます。

"Noto Sans CJK JP", sans-serif
    -> Noto Sans CJK JP(16字)
"Noto Serif CJK JP", serif
    -> Noto Serif CJK JP(16字)

同じ Noto Sans でも、Windows・Google Fonts では「Noto Sans JP」、Linux や Android のパッケージ版では「Noto Sans CJK JP」と名前が違います。 Linux の利用者も想定するなら、"Noto Sans JP" の直後に "Noto Sans CJK JP" を足しておくと当たる範囲が広がります。CI（自動テスト）でスクリーンショットを比べている場合も、テスト環境の Linux でどのフォントが当たっているかをこのスクリプトで確かめておくと、手元との見た目の差の理由が分かります。

document.fonts.check() は目安として使う

JavaScript の document.fonts.check() でも、フォントが使えるかを調べられます。ただし、この関数は @font-face で登録されていない名前を渡すと、端末に入っていなくても true を返すことがあります。

document.fonts.check('400 16px "Noto Sans JP"', '日本語')  -> true（Web フォント読み込み済み）
document.fonts.check('16px "Hiragino Sans"')               -> true（検証環境には入っていない）

2行目は、ヒラギノが入っていない検証環境での結果です。この関数は「Web フォントの読み込みが済んだか」を調べるためのもので、端末のフォントの有無の判定には向きません。端末のフォントを確かめたいときは、DevTools か上のスクリプトを使います。

太さ（font-weight）とフォントの関係

font-family とあわせて知っておくと役立つのが、太さの選ばれ方です。font-weight で指定した太さがそのフォントにないときは、近い太さが自動的に選ばれます。

ヒラギノの行は一般に知られた対応で、macOS では今回動かしていません。検証環境の Linux では、Noto Sans CJK JP に font-weight: 500 を指定すると「Noto Sans CJK JP Medium」に切り替わることを確認しました。

"Noto Sans CJK JP" + font-weight: 500
    -> Noto Sans CJK JP Medium(16字)

メイリオのように Regular と Bold の2種類だけのフォントでは、500 を指定しても Regular のままです。「本文をほんの少し太くしたい」ときの font-weight: 500 は、フォントによって効いたり効かなかったりするので、OS ごとの見た目を確かめてから採用します。

よくあるつまずきと直し方

指定を決める前のチェックリスト

• 末尾に総称ファミリー（sans-serif など）を置いたか
• スペースや日本語を含む名前をクォートで囲み、総称ファミリーは囲んでいないか
• macOS・iOS 用（Hiragino Sans）と Windows 用（Noto Sans JP、Yu Gothic Medium）の両方が入っているか
• <html lang="ja"> を書いたか
• フォーム部品に font-family: inherit を書いたか
• Web フォントを使う場合、使う太さだけに絞り、font-display を指定したか
• Windows と macOS、スマートフォンの実機か DevTools で、当たったフォントを確かめたか

よくある質問

Q. 游ゴシックとメイリオ、Windows ではどちらを先に書くとよいですか？ A. 2025年4月の更新以降の Windows には Noto Sans JP が入っているので、まず "Noto Sans JP" を先に書き、その後ろに "Yu Gothic Medium"、最後にメイリオを置く並びが扱いやすい選択です。游ゴシックを使う場合は、Regular ではなく Medium が当たるようにします。メイリオは画面表示向けに作られた、太めで読みやすいフォントなので、最後の受け皿として向いています。

Q. フォント名は日本語（"游ゴシック"）と英語（"Yu Gothic"）のどちらで書くとよいですか？ A. 英語名を基本にします。現在の主要なブラウザは英語名で認識します。ブラウザや OS の言語設定によっては日本語名だけが通じる場合もあるため、広く対応したいときは "Yu Gothic", "游ゴシック" のように両方を並べます。

Q. font-family に並べる数に上限はありますか？ 多いと遅くなりますか？ A. 上限はなく、端末のフォントを探すだけなので、10個前後を並べても表示速度への影響はごくわずかです。速度に影響するのは Web フォントのダウンロードです。読み込む太さを絞ること、font-display を指定することが効果的です。

Q. -apple-system や BlinkMacSystemFont は今も書く必要がありますか？ A. 現在の主要なブラウザは system-ui に対応しているので、system-ui を先頭に書けば足ります。-apple-system は、system-ui に対応する前の Safari 向けの書き方です。対応範囲を広く取りたいときに、system-ui の直後に添えておくとよい、という位置付けです。

まとめ

• font-family は左から順に、文字ごとに判定される。 末尾には必ず総称ファミリー（sans-serif など）を置き、総称はクォートで囲まない
• 本文のゴシック体は「Hiragino Sans → Noto Sans JP → Yu Gothic Medium → Meiryo → sans-serif」の順が、主要な OS で読みやすいフォントに当たる基本形
• 游ゴシックが Windows で細いのは、Regular（400）が選ばれるため。 "Yu Gothic Medium" を先に書くか、@font-face と local() で Medium を標準の太さとして登録する
• Windows には 2025年4月の更新から Noto Sans JP が入っている。 游ゴシックより前に書けば、太さの問題を通らずに済む
• system-ui は何が当たるかを OS に任せる指定。 日本語の本文には具体名の指定、アプリ風の UI には system-ui と使い分け、<html lang="ja"> を必ず書く
• Web フォントは使う太さだけ読み込み、font-display を指定する。 Noto Sans JP は unicode-range で分割されており、必要な文字のファイルだけが読み込まれる
• 実際に当たったフォントは、DevTools の「レンダリングされたフォント」か Playwright で確かめる。 getComputedStyle は書いた指定を返すだけ

株式会社RJCでは、CSS のフォント指定や文字組みの考え方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。