CSSのフォント指定の基本とfont-familyメーカーの使い方

CSSのフォント指定の基本

Webサイトのフォント種類指定の基本と、Font-familyメーカーの使い方を解説します。「font-familyとは何か」というところからはじめるので、既に知識のある方は以下のボタンでスキップしてください。

使い方解説へスキップ

font-familyの書き方

CSSでは文字(フォント)の種類を、font-familyというプロパティにより決めます(参考:プロパティとは?)。

フォントファミリーの意味

例えばこのコードは「pタグ内のフォントを’Impact’にする」という意味になります。

このようにセレクタ {font-family: フォント名;}という形で指定をします。

基本的に複数のフォントを指定する

複数のフォントをカンマで区切って書く

フォントは基本的に複数の種類を指定します。複数のフォントを指定するときはフォント同士の間を,で区切ります。スペースは入れても入れなくてもどちらでもOKです。

複数のフォントを書く理由

複数のフォントを書く理由

なぜ複数書くのかというと、OSによって入っているフォントが異なるからです。言い換えると、Windowsなのか、Macなのか、iPhone/iPad(iOS)なのかで搭載されているフォントが異なるのです。Macにしか入っていないフォントを指定しても、Windowsパソコンからはそのフォントでウェブページを見ることはできません。そこで複数のフォントを書いて対応します。MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバーするというイメージですね。

前に書かれたフォントが優先される

前に書かれたフォントが優先的に使われます

複数のフォントのうち、前に書かれたものから優先的に適用されます。上の図の場合、ウェブページを開いたブラウザはまずAvenirを使おうとします。もしAvenirがパソコンやスマホに入ってなければ、次のCorbelを使おうとします。このように前に書かれたフォントから適用としようとしてくれるのです。

英語フォントを前に書く

英語フォントを先に書く

英語だけを表示できる「英語フォント」と、英語+日本語を表示できる「日本語フォント」があります。font-familyを書くときは、英語フォントは前に並べるようにしましょう。そうすることでアルファベットには英語フォントで、日本語の文字には日本語フォントが使われるようになります。

英語フォントは日本語では表示できない

上の図のように英語フォントを前に書いておくと、アルファベットには英語フォントが適用され、日本語文字には前に書かれた日本語フォントから優先的に適用されます(もしアルファベットも日本語フォントで表示したいという場合は、日本語フォントを前に書けばOKです)。

間に半角スペースの入るフォント名は「’」ではさむ

「Avenir Next」のようにフォント名の間に半角スペースが入るものがあります。

間に半角スペースの入フォント名はクオテーションではさむ

間に半角スペースが入るフォント名はクオテーション'ではさみます(でないと適用されません)。’Times New Roman’や’MS ゴシック’もそうですね。

なお、シングルクオテーション'を使ってもダブルクオーテーション"を使っても構いません。また、間に半角スペースの入っていないフォントをクオテーションではさんでも問題ありません。

最後に総称フォントファミリー名を書く

総称フォント

総称フォントファミリー名と呼ばれるものをfont-familyの一番最後に書きます。「sans-serif」とかいうやつですね。

総称フォントファミリーとは?

総称フォントファミリーのイメージは「最後の砦」です。もしページを開いたパソコンに指定したフォントが全く入っていなかった場合に「せめてこういう系統のフォントを表示して」とブラウザに伝えておくわけですね。

総称フォントファミリー名一覧

総称フォントファミリーには5種類あります。たとえば「sans-serif」と書いておくとゴシック体系のフォント、「serif」と書いておくと明朝体系のフォントをブラウザが表示してくれます。

あくまでも「こういう系のフォントを使って」という指定になるので、実際に何のフォントが使われるかはブラウザによって異なります。

GoogleChromeの総称フォントの表示例

例えばGoogleChromeで各総称フォントを表示してみるとこのようになります。「cursive」と「fantasy」は「sans-serif」と同じ表示になってしまうようです。

「sans-serif」か「serif」を使おう

ほぼ全てのウェブサイトが総称フォントファミリーとして「sans-serif」と「serif」のどちらかを指定しています(ほとんどがsans-serif)。ゴシック体系のフォントを使いたいのであれば「sans-serif」を、明朝体系のフォントを使いたいのであれば「serif」を指定すると良いでしょう。

ウェブページ全体のフォントを指定する方法

基本的にfont-familyはウェブページ全体の文字に対してまとめて適用します(その方が楽ですね)。全体に対して指定するときには、以下のようにbodyをセレクタとして書きます。

サイト全体にフォントを適用する

body { font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'MS ゴシック',sans-serif; }

おすすめのfont-familyの書き方は?

読みやすさも考慮したうえでそこそこオシャレなfont-familyを考えてみました。MacでもWindowsでもiPhoneでもきれいに表示されるはずです。こだわりが無い方はぜひコピペして使ってみてください。

おすすめのフォント

body { font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic' }

各環境に対応しているフォント種類はどこで確認できるの?

あまりまとまっているところがないと感じたので「Font-familyメーカー」なるものを作りました。

font-familyメーカー
Font-familyメーカーの画面

Font-familyメーカーWindows、Mac、iPhoneの標準フォント(はじめからインストールされているフォント)を一覧でまとめています。これを使えば、各環境にどのフォントが対応しているのかを見ながらフォント選びをすることができます。使い方は後でくわしく説明します。

Android向けのフォントについて

Androidのスマホやタブレット向けに共通して指定できるフォントは基本的に以下の2種類です。どちらも無難なゴシック体フォントです。

  • Droid Sans
  • Roboto

Androidではフォント指定なしのときに使用されるフォントは端末によって異なります(この2つのどちらかでない場合があります)。個人的にはAndroid向けに指定する必要は特にないと思っていますが、指定なしだとどんなフォントで表示されるかは分かりません。もし統一しておきたいのであれば、font-familyにRoboto,'Droid Sans'を追加しておくと良いでしょう。そうすればどちらかのフォントを使って表示してくれます。

font-familyを書くときのコツ

フォントを指定するときのポイントをまとめておきます。

次のことに気をつける!

  • 優先的に使ってほしいフォントを前に書く
  • はじめに英語フォント、次に日本語フォントを指定する(アルファベットだけ英語フォントで表示されるように)
  • Windows、Mac、iPhoneの3環境をカバーするように複数のフォントを書く
  • Android向けはとりわけ考える必要はないが、Roboto,'Droid Sans'を書いておくと安心

  • 間に半角スペースの入るフォント名はクオテーション('もしくは"

    ではさむ

2. Font-familyメーカーの使い方

「CSSのフォントの指定方法がよく分からない」という方は、はじめに「font-familyの書き方」を読むことをおすすめします。

「font-familyの書き方」へ飛ぶ

Font-familyメーカーとは?

Font familyメーカーの使い方

Font-familyメーカー

ややこしいfont-familyを簡単に作成できるサービスです。自分でフォント名を打ち込む必要は一切ありません。使いたいフォントをドラッグしていくだけでfont-familyが完成します。

手順1. 標準フォント一覧から使いたいフォントを選ぶ

各環境の標準フォント一覧

画面の中心には①Windows ②Mac ③iPhone/iPadの3つの列が並んでいます。それぞれの列には各環境の標準搭載フォントが並んでいます。

Androidは?と疑問に思った方はこちらをご覧ください。 上の方には日本語フォントが並び、下にスクロールしていくと英語フォントが出てきます。英語フォントはアルファベット順で並んでいます。

スクロールしてもっと使いたいフォントを選ぶ

それぞれの列は個別にスクロールすることができます。この中から使いたいフォントを探します。

各フォント情報の見方

各フォント情報の見方

各フォントの枠にはさまざまな情報が載っています。

  • 日本語:日本語フォントの場合に表示されます。英語フォントの場合にはこの部分には何も表示されません。
  • フォント例1:実際にfont-familyが指定されたテキストが載っています。閲覧しているPCやスマホに該当のフォントがインストールされていないと別のフォントで表示されてしまうことにご注意ください。
  • フォント例2:フォントの表示例の画像を載せています。該当のフォントがインストールされていなくても見ることができます(信頼できるのはこちらの例の方です)。
  • 対応OS、バージョン:どの環境に標準搭載されているかを示しています。Windows: Mac:  iPhone:また、比較的最近搭載されるようになったフォントの場合、どのバージョンから対応なのかが載っています。

手順2. 使いたいフォントを下の黒いバーにドラッグ

使いたいフォントをドラッグ

使いたいフォントは、下の黒いバーまでドラッグします。すると、フォントがバーの中に追加されます。フォントはいくつでも追加できます。なお、追加されたフォントの欄は灰色になります。

背景が灰色になっているフォント=すでに追加されているものということです。

手順3. フォントの順を並び替え

フォントをドラッグして並び替え

下のバーに追加されたフォントはドラッグにより自由に並び替えることができます。この並び順=「font-family:〜」内のフォントの並び順となります。

優先的に使いたいフォントを前に並べましょう。また、英語フォントは日本語フォントの前に持ってくることをオススメします(詳細はこちら)。

手順3. 不要なフォントを削除する

ゴミ箱にドラッグして削除

不要なフォントはバー右端のゴミ箱までドラッグして削除しましょう。

リセットしたいときは

リセット

全てのフォントを消してやり直したいときは、右上のリセットボタンをクリックします。

手順4. font-family:〜;をコピーしてCSSに貼付け

font-familyをコピー

使いたいフォントの追加&並び替えが完了したら、画面最下部にある真っ黒の欄内をダブルクリックします。すると指定したフォント名が書かれたfont-family:〜;のテキストが全選択されます。

全選択した状態でctrl (⌘) + Cでコピーしましょう。これをそのままCSSにペーストして使うことができます。 セレクタは書かれていません。ウェブページ内の全てのフォントに適用したいときはbody{ここにペースト}としましょう。

応用1. 有名なウェブサイトのフォント使用例を参考にする

他のサイトのフォントを参考にする

メジャーなウェブサイトはどんな指定をしているのか気になりますよね。画面上部の黒いバー上の「facebook」や「twitter」などのボタンをクリックすると、それらのサイトで使われているフォントを見ることができます。

現在、以下の5ウェブサイトの使用フォントを載せています。

なお1番右の「おすすめ」というボタンをクリックすると、サルワカが選んだfont-familyが表示されます。

応用2. 総称フォントファミリーを変更する

解説:総称フォントファミリーって何?

総称フォントを変える

画面1番下の欄内に[sans-serif;]と書かれているかと思います。ここをクリックして[serif]や[monospace]などに変更することができます。

Font-familyメーカーを使ってみよう

解説は以上です。ぜひfont-familyメーカーをWeb制作にご活用ください。

Font-familyメーカー

サルワカではこのようなWeb制作用ツールを今後も作っていく予定です。更新情報はこちらから⇒

サルワカ