HTML・CSS講座

【CSS】文字を好きな書体(フォント)に変更しよう

2019年1月2日

今回は、タグ・デザイン掲示板に投稿されたこちらの質問を見ていきましょう。

小説、書体タグの挿入

質問者さんのお悩みは「作成している小説の書体を変えたい」ということと「書体を変える方法は分かったが書体が変わらない」ということでした。

こちらの質問はすでに解決していますが、ここでは改めて書体変更の方法と、なぜ正しくCSSを書いたのに書体が変わらなかったのか、詳しく解説していきたいと思います。

書体の変更方法

書体を変更するためには「font-family」というプロパティを使います。
ページ全体の書体を変更する場合は、

CSS

body {
font-family: ‘メイリオ’,’Meiryo’,’sans-serif’;
}

こういった書き方になります。
ページ全体(body)の書体(font-family)をメイリオ(’メイリオ’)に変える、という指示です。

書く時の注意点

・フォント名とフォント名の間は「,」で区切る(’メイリオ’,‘Meiryo’,‘sans-serif’)
・フォント名の両端を「’」で囲む(メイリオ,Meiryo,sans-serif)※1
・なるべく2つ以上のフォントを指定する

※1……厳密に言うと囲む必要のあるフォントと必要のないフォントがありますが、すべて囲んでおいて損はないのでここでは囲むことを推奨しています。

何でたくさん書くの?

ページ全体の書体をメイリオに統一したいだけなのに、なぜその他にもフォントを指定する必要があるのか?
そう疑問を感じる方もいると思います。

これは、サイトを見る人が使っている端末によってフォントの見え方や伝わり方が異なってくるからです。

例えば、Android端末とiPhone端末では表示することのできるフォントの種類が違いますし、上記の例でも「メイリオ」と「Meiryo」の同じフォントを2回指定しているのは、日本語のフォント名だとMacが認識してくれないからです。

なので、どの端末から見ても理想に近いフォントが表示されるように複数のフォントを指定する必要があるのです。

さらにfont-familyの特徴として、前に書いたフォントほど優先度が高くなります。
つまり上記の指示だと、「みんな、メイリオというフォントで表示して!Macくん、Meiryoだよ!メイリオ(Meiryo)が無理ならゴシック体だったら何でもいいよ!」という意味になります。
※sans-serifはゴシック体の総称フォントです。

こういった理由から、Windows用、Mac用、iPhone用と、どの端末にも対応できるようにフォント指定をしているサイトが多いです。

総称フォントを指定しよう

一つ前のところで「※sans-serifはゴシック体の総称フォントです。」と注釈を入れましたが、フォントは突き詰めていくと5つに分類することができます。

sans-serif ゴシック体
serif 明朝体
monospace 等幅
cursive 筆記体
fantasy 装飾

これら5つを総称フォントファミリーと言います。総称フォントはピンポイントでこのフォント、という指定ではなく、ゴシック体のフォント、明朝体のフォントなど雰囲気だけの大まかな指定になります。

例えば上記の例でメイリオがその端末に入っていなくて表示できない時に、ならせめてゴシック体のフォントでお願いします、という風な最後の頼みの綱とでも言うべきものです。
フォントを指定する際は、最後に総称フォントの指定を忘れないようにしましょう。

ただし、cursiveとfantasyはブラウザによってはsans-serifと同じ表示になってしまうこともあるので注意が必要です。

正しくCSSを書いたのに書体が変わらない

ここまで読めばもうお分かりですね。正しくCSSを書いたのに書体が変わらないのは、その端末が指定されたフォントに対応していないからです。

フォントの指定が何もされていないと、各端末はあらかじめ設定されているデフォルトのフォントでサイトを表示します。
なので、例えば以下のような指定をしても、

CSS

body {
font-family: ‘A font’,’B font’,’C font’,’sans-serif’;
}

サイト「A fontで表示お願いします!」
スマホ「いや、A fontないっす」
サイト「じゃあB fontで!」
スマホ「B fontも入ってないですね」
サイト「C fontでも大丈夫です!」
スマホ「あー、それもちょっと……」
サイト「……じゃあ、何でもいいんでゴシック体で……」
スマホ「了解でーす」

という感じで、指定したフォントがその端末で使えない場合、いくら正しくCSSを書いていても結局デフォルトのフォントのまま変わらないという結果になってしまいます。これが、正しくCSSを書いたのに書体が変わらない理由です。

解決策としては、多少手間かもしれませんが、Windows用、Mac用、iPhone用とフォントをきちんと指定するしかありません。
(Androidのことは考慮しなくて大丈夫です。なぜなのか詳しく知りたい方は「Android font-family」などで検索してみてください)

ウェブフォントを使ってみよう

端末ごとにフォントを指定するのはめんどくさい、もっと手軽に一括でフォントを指定したい!という方には、断然ウェブフォントがオススメです。
ウェブフォントとは、各端末に内蔵のフォントに左右されず、インターネット上から指定のフォントをダウンロードし表示する仕組みです。これならどの端末から見ようと同じフォントが一律で表示されます。

ウェブフォントの中でも特に有名なのがGoogle Fontsです。nanoのユーザーテンプレでも頻繁に使用されていますね。
グーグルフォントは種類も多く無料で使用できるので、フォントでお悩みの方にはぜひ一度使っていただきたいサービスです。

次回は、このグーグルフォントの使い方を解説していこうと思います。

You Might Also Like

No Comments

Leave a comment