このエントリーをはてなブックマークに追加

font-family、サイトのフォントを指定する

更新:

CSSのfont-familyは、メイリオや游ゴシック体など、ウェブページで表示するフォント(書体)を指定できるプロパティ。 もし何も指定しない場合は、OSやブラウザの既定フォントで表示される。

基本

font-familyの後に続けてフォント名を記述する。

body {font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

主な仕様は以下のとおり。

  • フォント名は複数指定可能。 その際、,(カンマ)で区切って記す。
  • フォント名にスペース(空白)を含む場合は、シングルまたはダブルクオーテーションで囲む。
  • フォントを複数指定した場合、先に記したものから順にユーザーのコンピュータ(パソコンやスマホ)に存在する(インストールされている)フォントが適用される。
  • ユーザーのコンピュータに存在しない(インストールされていない)フォントは無視される。
  • 指定したフォントが全てコンピュータにない場合、ブラウザやOSの既定のフォントが適用される。

また、特定の要素に別途フォントを指定する場合、最後に sans-serif または serif などを書いておいた方が良い。

以下のように書いて「MS PGothic」がない場合、body要素のfont-familyは適用されず、ブラウザの既定フォントが適用される場合がある。 要するに親要素のフォントが継承されない。

body {font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
.example {font-family:"MS PGothic";}

MacやiOSのSafariは既定が明朝体(serif)なので sans-serif で表示されない。

以下のように書く。

body {font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
.example {font-family:"MS PGothic", sans-serif;}

代表的なフォント

ウェブサイトで使われている代表的なフォントには以下のようなものがある。

Meiryo(メイリオ)
Windows Vista以降に搭載された。 ゴシック体のみで明朝体はない。 Windows環境では多くのサイトがMeiryoで表示される。 MS Pゴシックに見慣れている時代にはやや見にくい印象があったが、見慣れてしまった。 MacでもMicrosoft Officeなどをインストールしている場合は表示可能。
游ゴシック体
Windows 8.1、Mac OS X Mavericks以降に搭載された。 Windowsでは「游ゴシック」または「Yu Gothic」、Macでは「游ゴシック体」または「YuGothic」を指定する。
游明朝体
Windows 8.1、Mac OS X Mavericks以降に搭載された。 Windowsでは「游明朝」または「Yu Mincho」、Macでは「游明朝体」または「YuMincho」を指定する。
MS ゴシック(MS Gothic)
Windows 3.1から搭載されているゴシック体。 等幅フォント。
MS 明朝(MS Mincho)
Windows 3.1から搭載されている明朝体。 等幅フォント。
MS Pゴシック(MS PGothic)
Windows 95以降に搭載されたゴシック体。 プロポーショナルフォント。 昔のWindowsでは既定フォントになっていたブラウザも多かったが、その後Meiryoに変更されていった。
MS P明朝(MS PMincho)
Windows 95以降に搭載された明朝体。 プロポーショナルフォント。
ヒラギノ角ゴ ProN(Hiragino Kaku Gothic ProN)
Mac OS X v10.5 Leopard以降に搭載された。 ヒラギノはMacで一般的なフォントでiOS/iPadOSにも搭載されている。 W3、W6。
ヒラギノ明朝 ProN
W3、W6。
ヒラギノ丸ゴ ProN
W4。
ヒラギノ角ゴシック(Hiragino Sans)
OS X El Capitan(10.11)にてW0~W9のウェイト搭載。
Osaka
主にMacで使用されているフォント。 ゴシック体。
Noto Sans CJK JP
Windows版Chromeなどで使用されているフォント。
Arial
欧文フォント。 サンセリフ書体。 WindowsやMacに標準搭載。見やすさの観点から英数字の表示に使用している人もいる。
serif
ユーザーのコンピュータに存在する既定の明朝体が表示される。
sans-serif
ユーザーのコンピュータに存在する既定のゴシック体が表示される。

絵文字、記号

Segoe UI Emoji
Windowsに搭載されている絵文字のフォント。
Segoe UI Symbol
Windowsに搭載されている記号関連のフォント。
Apple Color Emoji
iOSやMacなどAppleのOSに搭載されている絵文字のフォント。
Apple Symbols
iOSやMacなどAppleのOSに搭載されている記号関連のフォント。
Noto Color Emoji
AndroidなどGoogleのOSに搭載されている絵文字のフォント。
Noto Sans Symbols、Noto Sans Symbols 2
記号関連のフォント。

注意点

游ゴシック体または游明朝体を指定する場合、WindowsとMacで名称が異なる点に注意する。 具体的には文字列におけるスペース(空白)の有無、末尾の「体」の有無が異なる。 WindowsとMacで一見統一感がないように思うが、名称が被らないので区別して記述できるという利点がある。

ゴシック体を使う場合

游ゴシック体は新しく、見た目は綺麗だが、Windowsではフォントの線が細く、やや見にくい。 見慣れていて、線も太めのメイリオを使用するのが無難かもしれない。 ただし、以下のように記述すると線を太くすることもできる。

font-family:'Yu Gothic Medium', sans-serif;

Mediumは標準より太く、Boldより細い。

逆に細くしたい場合は以下のように書く。

font-family:'Yu Gothic Light', sans-serif;

また、font-weightプロパティで太さを指定しても良い。

font-family:'Yu Gothic', sans-serif;
font-weight:500;

数値は400が標準。

明朝体を使う場合

サイトのアクセントとして明朝体を使用したい場合もある。 昔はAndroidに明朝体がインストールされていなかったが、バージョン10あたりから明朝体に対応している。 よって、画像やウェブフォントを使用しなくても、どの環境でも明朝体が表示できる。

font-family:'YuMincho', 'Yu Mincho', serif;

ウェブフォントは、Googleフォントを使うのが楽。 Google Fonts にアクセスし、適当な明朝体を探す。

必要なHTMLとCSSのコードが表示されるので、それをウェブサイトに使用する。

lang="ja"の有無

<html> を <html lang="ja"> と書くと、環境によってはバックスラッシュが円マーク(¥)として表示されることがある。 環境というのは、OSやブラウザの種類のほか、サイトで指定したフォントの種類や文字コードなど。 これ以外にも表示に影響が出る文字がある可能性もある。

自サイトで使うフォント

OSやブラウザがアップデートされた際、既定のフォントが変更されることがある。

  • 2024年9月、WindowsのChromeで既定のフォントがメイリオから「Noto Sans CJK JP」に変更された。
  • 2023年9月、iOS 17で日本語のフォントが少し太く表示されるようになった。

特定のフォントを指定しなくても、sans-serif または serif を指定しておけば何かしら最適なフォントが表示されるだろうと今まで考えていた。 ただ、最近はその考えが少し変わった。 字形や太さが変わると結構印象が変わる。

自サイトのフォントを決める際は、大手のサイトなどで使用されているフォントを参考にすると良いかもしれない。

現時点では、私のサイトの基本のフォントは以下のとおり。

font-family:"Hiragino Kaku Gothic ProN", YuGothic, Meiryo, sans-serif;

今まで何度か変更しており、今後も変わる可能性がある。


このエントリーをはてなブックマークに追加