失敗解決 / フォールバックとCSS

選んだ日本語フォントが変わらないときの確認順

候補を選んだのにカードが似ている、読み込み状況と字形が一致しない、コピーしたCSSが別のページで効かない。表示・出力・貼付先を分けて確認します。

最初に知っておくこと

このツールはフォントデータを同梱せず、font-family に候補名を優先順で並べます。CSSの候補名が書かれていても、その書体がこの端末にあるとは限りません。また、ブラウザは指定順、利用可能な書体、文字ごとの字形の有無に応じて表示します。日本語と英数字で異なる候補から表示されたり、一部の文字だけ別の候補から表示されたりする場合もあります。

したがって、CSSにある名前や検出表示だけでは、画面上のすべての文字をどのフォントが描いたかまでは確定しません。CSS Fonts仕様のフォント照合は、文字に合う字形がなければ次のファミリーを試す手順を定めています（W3C「CSS Fonts Module Level 3」）。

症状ごとの切り分け

次の症状は手順を説明するための架空ケースです。実際の問い合わせ件数や発生頻度を示すものではありません。

症状	確認する表示	次に行うこと	期待する結果
4枚がほとんど同じに見える	「候補フォントの読み込み状況」と各カード下の`font-family`	候補に未検出があれば別の検出済み候補を選び、同じ端末・同じブラウザ・同じ本文で再比較する	利用可能な候補の字形で差を確かめられる。環境が同じフォールバックを使えば似たままのこともある
未検出と出るが文字は表示される	「未検出 — 指定順にフォールバック」または「判定できません — フォールバック表示」	表示中のCSS候補列を確認し、選択した組と端末で使える候補が違う場合は選び直す	ページ自体は代替フォントで表示される。未検出はCSSが無効という意味ではない
コピーしたCSSを貼っても変化しない	出力セレクターが対象HTMLにあるクラスと一致するか	ツール用クラスを貼付先の要素へ付けるか、セレクター部分を自分のHTMLに合わせる	対象要素にCSSが適用され、端末にある候補から表示される
コピー完了とならない	ボタン下の案内とカード内の「適用CSSを表示」	コード表示から必要なCSSを選択して手動コピーする	クリップボード操作が使えなくても、画面上のCSSを確認できる

別のページでCSSを使うとき

「私の組み合わせ」カードが出力するCSSは、ツール内の次のクラス構造を対象にしています。貼付先に同じクラスがない場合は一致する要素がなく、指定が適用されません。

<article class="hibi-specimen--custom">
  <h2 class="hibi-specimen__heading">見出し</h2>
  <p class="hibi-specimen__body">本文</p>
</article>

出力される見出し側のセレクターは次の形です。本文側も同じ外側クラスの下に.hibi-specimen__bodyを指定します。

.hibi-specimen--custom .hibi-specimen__heading {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "游明朝", "Noto Serif JP", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 32ch;
}

確認順：①ツール上のカードで変化を見る、②「適用CSSを表示」で出力を読む、③貼付先HTMLのクラスとCSSセレクターを照合する、④別の端末でも対象フォントがあるか確認する。

ツールの初期値から別の値を設定した場合、CSS例の数値はその設定値に置き換わります。

確認できる範囲と制約

読み込み状況はブラウザ内のFontFaceによるローカル候補の試行結果です。候補が検出されても、字形・ウェイト・描画結果がOS間で同じとは限りません。未導入の書体をツールがダウンロードすることもありません。

候補フォントの選択とCSS表示は日々の書見台で確認できます。用途別の入力例は架空の読書会案内を参照してください。

候補とCSSを確認する