どうも7noteです。デザインを通ってないと種類が多くて指定が厄介なフォントのお話。

いざホームぺージをコーディングするときにデザインデータを見ると、様々なフォントがいろんなところに使用されています。
ただ一般の人がWEBサイトを見る時にみれるフォントは限られているので、font-familyを正しく指定しなければ思っている通りのデザインにはなりません。

特にwindows、mac、iphoneではそれぞれみれるフォントが違うので、しっかりとデザインで使われているフォントと見比べる必要があります。

各デバイスで使用できる主要フォント一覧

Arialだけは欧文フォントですが、それ以外は日本語フォントです。
こうして比べると各デバイス共通で使える日本語フォントはないのです。
なので、基本フォントを指定する時は以下のような指定方法を行います。

font-family 指定例

font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

※sans-serifはそのデバイスで使用できるゴシック体

主要フォント以外がデザインで使用されている場合の対応方法

いざデザインデータの中をみた時、「あれ、このフォントデフォルトで入ってないやつだ・・・」ってなったらどうしましょうか？

1.画像にしてしまう。
あまりないフォントだったり、大きな見出しだったり、グラフで使われていたりする箇所ならいっそ画像にしてしまう方が良いでしょう。

2.基本フォントで作成する。
デザイナーに確認して、重要度が高くないところなどは周りに合わせてデバイスのデフォルトのフォントでいくのも1つの方法でしょう。

3.WEBフォントを読み込む。
WEBフォントを読み込むことで、デバイスにないフォントでもユーザーがそのフォントで見ることができます。WEBフォントの入れ方はまたそのうち記事書きますね。

font-familyの指定に便利なツール

Font-familyメーカー byサルカワ
https://saruwakakun.com/font-family

上記のURLにアクセスするとFont-familyメーカーが開けます。
各デバイスで使えるフォントの一覧がみれるのと、下の欄にドラッグ&ドロップでfont-familyを作成し、コピペで簡単にオリジナルのfont-familyを指定できます。

font-familyの誤った指定方法や、注意点

× 存在しないフォントや読み込んでないフォントを指定

font-family: "aiueo-font", "リュウミン";

※iphoneは読み込めないフォントを指定したままだと、明朝体になってしまうので注意！！！

× 日本語名のフォントを（” “）ダブルクォーテーションで閉じない

font-family: ヒラギノ角ゴ ProN;

まとめ

フォントはデザイナーにもよって使うフォントが全然違うし、デバイスによっても使えるフォントが違うので非常に難しいし、悩むことが多いと思います。だからこそマイルールを決めたり、デザイナーと相談したり、便利なツールを使用することで開発の時間を短縮して効率的な作業を目指しましょう！

おそまつ！