Help us understand the problem. What is going on with this article?

font-familyに指定する2017年春の決定版メモ

More than 1 year has passed since last update.

Webサイトで表示するフォントは閲覧するユーザーの環境に依存しています。
グラフィックデザインメインの方でWebサイトのデザインを行う場合などの
Webサイト制作をしたことのない人だと知らない方が多いので前置き書いてます。

例えば、『ヒラギノ』を指定していても、ユーザーの環境になければ別のフォントが表示されてしまいます。
同じく、明朝体はもっと悲惨でWindowsではキレイに表示できるのがわりと最近です。
(なので基本的に日本語のWebサイトってゴシック体が多いですよね。MS明朝は超汚いので過去に全てのテキストを明朝体でデザインされた時には投げたくなりました。)

ゴシック体の指定はこれ!

body {
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}

-apple-systemとBlinkMacSystemFont

Appleの最新システムフォント「san francisco」を指定したいので記載。
macでChromeを使う場合を想定してBlinkMacSystemFontも入れてます。

英数フォントの指定

フォントweightが揃っているものを指定しています。
理由はboldなどを指定した時の綺麗さを考えるとWindowsのArialなどは適さないので、Segoe UIを指定しています。

Webフォントの指定

Webフォントの日本語は有料サービスなどが多いですが、『Noto Sans Japanese』はAdobeとGoogleが共同開発したフォントで無料で使用できますし、私は『源ノ角ゴシック』というフォントでインストールして使用しています。
(見やすくてweightも多く便利!)

このフォントを指定する場合は別途HTMLに以下を記載した上で指定してくださいね。
Google Fonts + 日本語早期アクセスで他にも日本語フォントがあります。

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

macのデフォルトフォント→Windowsのデフォルトフォントの順で

macではデフォルトでヒラギノが使用できますよね!
元々キレイなフォントなので指定。
Windowsはメイリオを指定。

mac、Windows共に利用できる游ゴシックは今回やめました。
個人的に細すぎてメイリオよりキレイに見えなかったのです。

最後にサンセリフ体の指定を忘れずに

複数指定していてもどれにも当てはまらない環境があるかもしれないのでサンセリフ体(ゴシック体)の指定をしておきます。

font-familyにこれだけ指定していると環境でデフォルトに設定されているフォントが適応されます。
macならヒラギノやOsaka、Windowsならメイリオや游ゴシック、古いパソコンだとMSゴシックとかですね。

まとめ

Webサイトに関わらず、印刷物でもフォントはアウトライン化しておくのが鉄則だったりしますよね。
理由は入稿するとき、印刷所の方でデータ内で使用しているフォントが無いとフォントが置き換わってしまい、違うデザインになってしまうから。

Webサイトではフォントをアウトライン化みたいな事をすると全部画像でいいんじゃないかとなってしまうので、このように複数のフォントを指定します。
どれかがヒットするはずですし。

できるだけキレイなフォントでWebサイトを見て欲しいので単に『sans-serif』だけを指定するのは止めましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away