みなさん、font-familyは正しく設定できていますか？
font-familyはサイトに表示されるフォントを予め決めておくことができるCSSプロパティのことです。
いつも同じものを使っているためフォントを変更する際に指定を間違えてしまったり、テンプレートをそのまま使っているのでよく理解していない、という方もいるかもしれません。
今回は、font-familyを設定するための解説していきますので、是非ご覧ください！
目次
「font-family」とは？
font-familyとは、要素に対してフォントの優先順位リストを指定することができます。
表示させたいフォントを指定することができ、デバイスにそのフォントがインストールされていなかった場合の代替フォントをいくつも設定できます。
Windows・Macでインストールされているフォントが異なるため、綺麗に見えるフォントを検討していくつか指定しておいた方がよいです。
また、表示できるフォントが一つもなかったときのために、一番最後には総称フォントを指定してください。こちらは次の項目で説明します。
▽下記は游ゴシックとヒラギノ角ゴシックを指定した例です。
游ゴシックがインストールされているデバイスでは游ゴシックが優先的に表示されます。游ゴシックが入っていないデバイスでは、ヒラ角、メイリオ、その他のインストールされたゴシック体……というふうに優先度の低いものが表示されるようになっています。
|
1 |
font-family: "游ゴシック", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, sans-serif; |
総称フォントとは？
総称フォントというのは、そのデバイスで表示できるフォントがfont-familyに1つもなかったときに、できるだけ形の似たフォントを表示させておくためのものです。
「ゴシック体」「明朝体」「筆記体」などなど……というざっくりとした括りから選ぶことができ、インストールされているフォントの中から自動でフォントを割り当ててくれます。
総称フォントは必ず最後に1つ付けておいてください。
総称フォント早見表
| ゴシック体 | sans-serif |
|---|---|
| 明朝体 | serif |
| 筆記体 | cursive |
| 等幅 | monospace |
| 装飾 | fantasy |
上記の表の英字には、総称フォントのみのfont-family（font-family:sans-serif;など）を指定してあります。それらしいフォントが表示されているでしょうか？
この他にも絵文字用や数式用の総称フォントなども用意されているので、気になる方は調べてみてください。
Macではデフォルトのフォントが明朝体？
Macではデフォルトのフォントが明朝体になっています。
そのため、ゴシック体を表示させたいサイトで、フォントファミリーに指定されたフォントがインストールされていなく、総称フォントが存在しない場合、そのMacではフォントが明朝体になってしまいます。
ゴシック体と明朝体では印象がだいぶ変わってしまいますので、総称フォントは必ず正しく設定しておいてくださいね。
おすすめの「ゴシック体・明朝体」の指定
こちらでは「ゴシック体」と「明朝体」の使いやすいfont-familyの指定を紹介していきます。
紹介しているfont-familyを設定した場合の各デバイスごとの見え方もキャプチャで確認できますので、参考にしてください。
また、キャプチャで利用したデモサイトもありますので、お手持ちの端末で確認したい場合はご活用ください。
ゴシック体
|
1 |
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; |
Windowsでは游ゴシックが表示され、游ゴシックがインストールされていないMac端末ではヒラギノ角ゴシックが表示されます。
游ゴシックが「游ゴシック」と「游ゴシック体」の2つで指定されていますが、デバイスによって游ゴシックのフォント名が違うことが理由です。Windowsでは「游ゴシック」、Macでは「游ゴシック体」といいます。游ゴシック体がインストールされているMac端末では、Windowsと同じように游ゴシックが表示されます。
また、Windows用の游ゴシックの指定が「Medium」となっていますが、Windowsの游ゴシックのウェイトがデフォルトでRegularで、細くて少し見づらい場合があるためMediumにしてみました。
最後にはゴシック体用の総称フォント「sans-serif」を指定しておきます。
ゴシック体の場合は「MSゴシック」が後ろの方に設定されていることも多いのですが、大抵はMSゴシックよりもきれいなフォントがインストールされているので、省いています。
各デバイスごとのフォントの見え方
上記で紹介した内容でfont-familyを設定したときの、各デバイスのテキストの見え方をまとめました。
デモサイトも用意してありますので、気になる方はぜひご覧ください。
ゴシック体デモサイト
Windows
Mac
iPhone
Android
明朝体
|
1 |
font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif; |
Windowsでは游明朝が表示され、游明朝がインストールされていないMac端末ではヒラギノ明朝が表示されます。
MS明朝はきれいでないので、指定していません。
また、ゴシック体同様に游明朝には「Medium」と指定してあります。Windowsの游明朝のウェイトがデフォルトでRegularのため、細くて見づらい場合があるためMediumとしています。
最後には明朝体用の総称フォント「serif」を指定しておきます。
また、Android端末では明朝体がデフォルトでインストールされていません。そのため総称フォントにserifとつけておいても、ゴシック体が表示されてしまいます。
こちらの対処法は後ほどAndroid端末には明朝体が入っていないにて解説いたします。
各デバイスごとのフォントの見え方
上記で紹介した内容でfont-familyを設定したときの、各デバイスのテキストの見え方をまとめました。
デモサイトも用意してありますので、気になる方はぜひご覧ください。
明朝体デモサイト
Windows
Mac
iPhone
Android
前述のとおり、Android端末には明朝体がデフォルトで入っていないため、日本語がゴシック体で表示されています。
これまでは一つも明朝体が入っていないとされていたのですが、今回の検証では英数字は明朝体、日本語はゴシック体となっていました。
（端末によっては日本語も明朝体で表示されるものもあるようです。）
こちらの対処法はAndroid端末には明朝体が入っていないにて紹介しますので、ご覧ください。
有名サイトのfont-family
有名なサイトではどんなfont-familyの設定か気になったので、見てみましょう！
今回は4つご紹介します。意外な指定もあるかもしれません。
yahoo!JAPAN
検索やニュース、お天気情報、ショッピング、メールサービスなどを提供するyahooのポータルサイトです。
文字情報の多いサイトになっています。
yahoo!JAPAN
|
1 |
font-family: YJTop Ellipsis,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif; |
ヒラギノ角ゴシックで表示されている読みやすいサイトです。
「YJTop Ellipsis」がどこに使われているのかはわからないのですが、フォント名からしてyahoo独自のフォントかなと思います。
TRILL [トリル]
ファッションやコスメ、グルメ、旅行などの記事を配信するライフスタイルメディアサイトです。
TRILL [トリル]
|
1 |
font-family: -apple-system, BlinkMacSystemFont, Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans", "Noto Sans CJK JP", "モトヤLシーダ3等幅", MotoyaLCedar, "メイリオ", Meiryo, sans-serif; |
システムフォントの次に英文フォント、そして和文フォントと指定されていました。
サイトを閲覧すると英数字が読みやすいフォントで表示されているのがわかります。
また、記事詳細の本文は文字が小さめになっていますが、読みやすいと感じます。
Wikipedia
誰でも情報を閲覧・編集ができる、多言語インターネット百科事典です。
なんと284の言語で記事が作成されているそうです。
Wikipedia 日本語
|
1 |
font-family: sans-serif; |
総称フォントのみの指定で、完全にデバイス依存となっていました。
多言語展開されているサイトなので、特定のフォントを指定しないほうがよいということのようです。
筆者のWindows環境ではメイリオで表示されています。たくさんの文字が表示されたページでも読みづらいということはありません。
Webフォントを使う場合
Webフォントというのは、元々デバイスにインストールされているフォントではなく、サーバーにアップされていてWebページで利用できるフォントのことです。
デバイスフォントとは違い、フォントの分読み込みが少し重くなるというデメリットがありますが、どのデバイスでも好きなフォントを表示できるので便利です。
無料のサービスではGoogle Fontsがあります。
有料サービスではFONTPLUSやTypeSquareなどがあります。利用したいフォントに合わせて、サービスを検討してください。
自分でフォントをサブセット化し、サブセット化したフォントを自前のサーバーにアップし読み込むことで、好きなフォントをWebフォント化することもできますが、ライセンスで改変・再配布が禁止されている場合があります。
Webフォントを自分でサブセット化して利用したいと思ったら、まずはライセンスを確認してください。
Google Fontsを使う
Google FontsはたくさんのWebフォントを無料で利用できるサービスです。
ライセンスはほとんどがSIL Open Font Licenseで、一部APACHE LICENSE, VERSION 2.0となっており、どちらも商用利用が可能です。
ライセンスについては、利用時にご確認ください。
使い方も簡単で、Webフォントだけでなくデバイスにインストールすることも可能です。
デバイスフォントじゃ味気ない……という場合は、是非Google Fontsから選んでみましょう！
Google Fontsの使い方
01使いたいフォントを選ぶ
Google Fontsにアクセスしたら、使いたいフォントの中から必要なウェイトを選びます。
キャプチャはNoto Sans JPの500と700を選択した状態です。
02読み込み方を選択
読み込みを<link>か@importか選びます。
<link>はHTMLのhead内に、@importはCSSファイル内に記述します。
どちらでもよいですが、@importなら、フォント・ウェイトの変更や追加があった場合に同じCSSを読み込んでいるすべてのページに一括で変更ができるため簡単です。
03font-familyを設定
font-familyがコピーできるので、必要な箇所に貼り付けてください。
きちんとフォントが表示されていれば完了です。
Adobe Fontsについて
Adobe CCを契約していると利用ができるAdobe Fontsがあります。
こちらもフォントを選択してWebフォントとして利用ができるサービスです。
Adobe Fontsには規約がいくつかありますので、規約をよく確認して利用してください。
例えば、クライアントのWebサイトではクライアントのAdobe CCアカウントで取得したWebフォントを利用するという規約があります。つまり、制作者側のAdobe CCアカウントから取得したWebフォントは利用できません。
また、Adobe CCの契約更新を行わなかった場合、Webフォントは利用できなくなります。
Adobe FontsのフォントをWebフォントとして利用したい場合は、クライアントの方でAdobe CCを契約・Webフォントのコードの取得を行っていただく必要があるので、よくすり合わせてください。
更に詳しく知りたい方は下記の記事をご覧ください。
【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか
Android端末には明朝体が入っていない
Android端末では明朝体がインストールされていないため、明朝体を指定しておいてもゴシック体で表示されてしまいます。こちらはWebフォントを使うことで解決できます。
Noto Sans JP（Google Fonts）などの明朝体フォントを、Android端末にのみ読み込ませることができます。
01Noto Serif JPを指定した外部ファイルを用意する
Noto Serif JPをインポートし、font-familyを上書きする記述がされたCSSファイルを用意しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
▽android.css @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap'); body { font-family: 'Noto Serif JP', serif; font-weight: 500; } |
02Androidの場合のみ読み込みできるように
jsでデバイス判定を行い、Androidの場合のみその外部ファイルが読み込みされるようにheadタグ内にscriptを記述します。
実際にAndroid端末でサイトを開き、Noto Serif JPが表示されていたら成功です。
|
1 2 3 4 5 6 7 8 9 10 |
let userDevice = navigator.userAgent; function JudgingFromUserAgent() { if (navigator.userAgent.match(/Android./)) { document.write('<link rel="stylesheet" href="./android.css">'); console.log('android'); } } JudgingFromUserAgent(); |
jsでのデバイス判定は、下記記事を参考にしています。（2025年3月26日現在、サイトが見られないようです…。）
『【JavaScript】スマホ判定をする2つの方法 | userAgentと画面幅でスマホ判定』
また、こちらの設定をした際のキャプチャとデモサイトを用意したので、ご覧ください。デモサイトをAndroid端末（またはレスポンシブモードでAndroid機種を選択）で確認すると明朝体が表示されていると思います。
Android用 明朝体デモサイト
最近は明朝体がデフォルトでインストールされたAndroid端末もあるようなのですが、端末によって差があるので、明朝体を主に利用するサイトでは対応したほうがよさそうです。
まとめ
今回はfont-familyについて解説しました。
頻出するCSSプロパティではありますが、意外に知っておくべきことが多いですよね。
実はあんまりよく知らずに使っていたという方も、今回を機にfont-familyもこだわって記述するようにしてみてください！
Webフォントの利用やライセンスについては見落としがちかもしれません。
デバイスフォントではないフォントを利用する際、Google Fontsを利用できないことがあります。
有料のWebフォントサービスやAdobe Fontsでしかそのフォントが利用できない場合には、クライアントとよく相談しサービスを利用できるようにするか、できなければデザインで利用しているフォントを一新する必要があります。
もし有料のWebフォントサービスやAdobe Fontsを利用できるかわからないなら、デザインで利用するフォントはデバイスフォントまたはGoogle Fontsの中から検討しておくほうが安心です。
どうしても特殊なテキストを使いたい場合には、そのテキストを画像で表示することも可能です。
font-familyを正しく設定してサイト制作をスムーズにしましょう！
こちらの記事が皆さまのお役に立てますと幸いです。
