font-family プロパティ
font-family プロパティは、フォントを指定する CSS プロパティです。 指定できるフォントは、フォントファミリー名（family-name）とそのフォントファミリー名の種類ごとの総称である generic-family です。
/* 明朝 */ font-family: "YuMincho","游明朝体","Yu Mincho","游明朝",serif; /* ゴシック */ font-family: "YuGothic","游ゴシック体","Yu Gothic","游ゴシック",sans-serif; /* 等幅フォント */ font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace; /* 筆記体 */ font-family: cursive;
font-family プロパティで複数のフォントが指定できます。各値はコンマで区切ります。最初のフォントが優先されます。そのフォントがない場合には次のフォントが試されます。
大まかなフォントファミリーの区別である generic-family 名は入れておいた方がよいでしょう。以下の「 font-family プロパティの値」を参照してください。
フォントファミリーで指定する、またはフォント名に空白が含まれている場合は引用符で囲む必要があります。HTMLテキスト内で直接「style」属性を使用する場合は、引用符'
、"
で囲む必要があります。
指定フォントが使用できるかは、ユーザーの閲覧環境に依存します。ユーザーのOSに指定フォントが入っていないと代替えフォントで表示されます。
もし設定されたフォントがブラウザにない場合（正確にはOS）は他の汎用フォントで表示されます。
font-family プロパティの値
font-family プロパティで指定するフォントファミリー（family-name）がない場合でも似たフォントで表示してほしいものです。
指定するフォントファミリーがない場合でも、generic-family によるゴシック、明朝体、等幅フォント、筆記体といったおおまかな候補を入れておいた方がよいでしょう。
多くの場合、generic-family は font-family プロパティの最後に指定します。
generic-family
ゴシック、明朝体、等幅フォント、筆記体といったおおまかな候補です。
| generic-family名 | 概要 |
|---|---|
| serif | 明朝体。セリフ |
| sans-serif | ゴシック体。サンセリフ |
| system-ui | OS 標準のフォント |
| monospace | 等幅フォント |
| cursive | 筆記体 |
| fantasy | 装飾のある文字（あまり使わない） |
family-name
以下は、OS が Mac や Windows の標準でインストールされているであろうフォントファミリー名だけを取り上げます。
| フォント種類 | OS | family-name |
|---|---|---|
| 明朝 | Mac | "YuMincho","游明朝体","Hiragino Mincho ProN","ヒラギノ明朝 ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro" |
| Windows | "Yu Mincho","游明朝","MS Mincho","ＭＳ 明朝","MS PMincho","ＭＳ Ｐ明朝" | |
| ゴシック | Mac | "YuGothic","游ゴシック体","Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro","Hiragino Maru Gothic ProN W4","ヒラギノ丸ゴ ProN W4","Osaka" |
| Windows | "Yu Gothic","游ゴシック","MS Gothic","ＭＳ ゴシック","MS PGothic","ＭＳ Ｐゴシック","Yu Gothic UI" | |
| 等幅フォント | Mac | "Courier New","Monaco","Osaka-Mono" |
| Windows | "Consolas" | |
| 欧文フォント | Mac | "Arial","Arial Black","Helvetica","Helvetica Neue","Verdana","-apple-system", "BlinkMacSystemFont","Times New Roman" |
| Windows | "Arial","Arial Black","Segoe UI","Verdana","Times New Roman" |
利用できるフォントファミリーには Google Fonts
やダウンロードするフォントがあります。
Google Fonts
は <link> で取り込む方法を指定します。詳しくは Google Fonts
のサイトを参照してください。
ダウンロードして利用するフォントは、自サイトのサーバーに保存して利用します。@font-face の src プロパティで読み込み元のファイルを指定します。
Web セーフであるかや web ページの読み込みに時間がかかる場合があるといったことを考慮に入れた方がよいでしょう。
構文(Syntax)
CSS
font-family: family-name | generic-family | initial | inherit ;
DOM ( JavaScript )
String = object.style.fontFamily;
object.style.fontFamily=" family-name | generic-family | initial | inherit ";
値（Values）
font-family プロパティで複数のフォントが指定できます。各値はコンマで区切ります。最初のフォントを優先するのですが、そのフォントがない場合には次のフォントが試されます。
大まかなフォントファミリーの区別である generic-family 名は入れておいた方がよいでしょう。以下の「 font-family プロパティの値」を参照してください。
フォントファミリーで指定する、またはフォント名に空白が含まれている場合は引用符で囲む必要があります。HTMLテキスト内で直接「style」属性を使用する場合は、引用符'
、"
で囲む必要があります。
指定フォントが使用できるかは、ユーザーの閲覧環境に依存します。ユーザーのOSに指定フォントが入っていないと代替えフォントで表示されます。
もし設定されたフォントがブラウザにない場合（正確にはOS）は他の汎用フォントで表示されます。
| Value | 摘要 |
|---|---|
| family-name | 'Times New Roman'、'Courier'、'ＭＳ ゴシック'など。family-name を参照のこと |
| generic-family | sans-serif、 serif、 monospace、 fantasy, cursive, 和文フォントgeneric-family を参照のこと |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | 指定しなければブラウザの既定値 |
| 継承（Inherited） | Yes |
| CSS Animation | No |
Example
フォント名に空白が含まれている場合は引用符で囲む必要があります。HTMLテキスト内で直接「style」属性を使用する場合は、引用符'
、"
で囲む必要があります。
font-family プロパティで複数のフォントが指定できます。各値はコンマで区切ります。最初のフォントを優先するのですが、そのフォントがない場合には次のフォントが試されます。
関連する CSS プロパティ
関連するプロパティに以下があります。
| font | fontに関するプロパティの一括指定 |
| font-style | 文字のスタイル |
| font-variant | スモールキャップの有無 |
| font-variant-caps | スモールキャップの有無 |
| font-weight | 太さ |
| font-size | 大きさ |
テキストに関するプロパティには以下があります。
| プロパティ | 概要 |
|---|---|
| line-height | 行間 |
| text-align、vertical-align | テキストの配置操作 |
| background{ linear-gradient() } | マーカーでラインを引いたような装飾 |