なぜ「=」だけデザイン通りにならない？ Web制作で使える「フォントのフォールバック」の考え方

先日、Web制作を学んでいる受講生の方から、こんな相談をいただきました。

「カンプ(デザインカンプ)では見出しの中の半角の『=』だけ英語っぽい書体（Montserrat）になっているのに、自分のコードだと日本語部分と同じ書体になってしまい、再現できません」と。

実はこれ、Web制作の学習者がよくつまずくポイントです。今回は、この相談への回答をベースに、私が実務で意識している「フォントのフォールバック」の考え方を解説します。

相談内容：一部の文字だけ違うフォントになっているデザインを再現したい

具体的には、見出しの「サイトのゴール = 夢を叶えること」という文言のうち、半角の「=」の部分だけ、他の日本語文字と違うフォント（Montserrat）で表示されているデザインでした。

受講生の方は、

と、自分なりに複数の対応案を考えたうえで質問してくれました。原因の切り分けと、それに対する打ち手を複数用意する姿勢は、実務でもそのまま評価されるポイントです。

結論から言うと、この現象の原因は「日本語フォントを直接指定してしまったこと」にあります。

Yu GothicやメイリオといったフォントをCSSで指定すると、見出しの中の日本語も半角記号もすべて同じフォントで描画されます。そのため、本来Montserratで表示したい「=」まで日本語フォントに引っ張られてしまい、デザインと差が生まれていたのです。

ここで実務でよく使われるのが、font-familyにフォントを複数並べて指定する「フォールバック」という仕組みです。

font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

ポイントは、Montserratのような欧文フォントは日本語の文字（グリフ）を持っていないということです。そのため、

半角の英数字や記号（=など） → Montserratのグリフが存在するので、そのままMontserratで描画される
日本語の文字 → Montserratにグリフが存在しないため、自動的に次の候補（Hiragino Kaku Gothic ProNやMeiryoなど）にフォールバックする

という挙動になります。つまり、=だけを個別にspanタグで囲んで専用のCSSを当てる必要はなく、見出し（もしくはbody）に1つfont-familyを指定するだけで、ブラウザが文字ごとに自動でフォントを振り分けてくれるのです。

「デザインの見た目を完全に再現するため、画像として配置する」という案も検討していましたが、今回のケースではテキストのままで十分再現できます。画像化を避けられると、次のようなメリットがあります。

見た目を完璧に再現したいときほど「画像に逃げる」のではなく、まずCSSで実現できないかを疑ってみると、後々のメンテナンスがぐっと楽になります。

デザインカンプで「一部の文字だけ違う書体に見える」場合、多くは特別なテクニックが使われているわけではなく、単に指定したフォントに日本語のグリフがなく、自動的に他のフォントへ切り替わっているだけ、というケースがほとんどです。

font-familyの並び順を意識するだけで、余計なマークアップや画像を増やさずにデザインを再現できます。ぜひ一度、ご自身のコードのfont-family指定を見直してみてください。

Webサイトの制作やコーディングのセカンドオピニオン、またはメンタリングにお困りの方は、お気軽にご相談ください。