OSに標準搭載されている和文フォントを使う(HTML/CSS)

前書き

Webフォントを使えば、どのOSに対しても同じフォントを使用することが出来ます。
ただし、フォントデータの容量が大きくなると、ページの表示速度が遅くなる可能性があります。
和文フォントは文字数が多い為、容量に注意が必要です。
Webフォントは日々改良されていますが、OSに初めから搭載されているフォントを使う事が出来れば、それに越したことはありません。
Webページに使えそうな和文フォントを掲載しています。

目次

  1. Windows
  2. BIZ UDゴシック
  3. BIZ UD明朝
  4. UDデジタル教科書体
  5. macOS
  6. ヒラギノ角ゴシック
  7. ヒラギノ丸ゴシック
  8. ヒラギノ明朝
  9. Windows、macOS共通
  10. 游ゴシック
  11. 游明朝
  12. メイリオ
  13. その他
  14. 参考

Windows

Windows 10 October 2018 UpdateでBIZ UDゴシック / 明朝が採用される
Windows 10 Fall Creators UpdateでUDデジタル教科書体が採用される
BIZ UDゴシック (Regular/Bold)
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "BIZ UDGothic"; //等幅
font-family: "BIZ UDPGothic"; //プロポーショナル
BIZ UD明朝 (Medium)
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "BIZ UDMincho"; //等幅
font-family: "BIZ UDPMincho"; //プロポーショナル
UDデジタル教科書体
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "UD Digi Kyokasho N-B"; //等幅 ボールド
font-family: "UD Digi Kyokasho N-R"; //等幅 レギュラー
font-family: "UD Digi Kyokasho NP-B"; //プロポーショナル(英数) ボールド
font-family: "UD Digi Kyokasho NP-R"; //プロポーショナル(英数) レギュラー
font-family: "UD Digi Kyokasho NK-B"; //プロポーショナル(かな・英数) ボールド
font-family: "UD Digi Kyokasho NK-R"; //プロポーショナル(かな・英数) レギュラー

//font-weight: bold; の時だけに、ボールドのフォントを適用する場合↓
@font-face {
  font-family: "myFontKyokasho";
  src: local("UD Digi Kyokasho NK-R");
}
@font-face {
  font-family: "myFontKyokasho";
  src: local("UD Digi Kyokasho NK-B");
  font-weight: bold;
}
font-family: myFontKyokasho, "UD Digi Kyokasho NK-R";

macOS

ヒラギノ角ゴシック
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans";
ヒラギノ丸ゴ
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro";
ヒラギノ明朝
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro";

Windows、macOS共通

游ゴシック
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "Yu Gothic", YuGothic; //調整方法はググって下さい
游明朝
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: "Yu Mincho", YuMincho; //調整方法はググって下さい
メイリオ
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789 <>&!#@{}"'

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ


font-family: Meiryo;

その他

iOSには、ヒラギノ角ゴシック、ヒラギノ丸ゴ、ヒラギノ明朝が搭載されている。
Androidに搭載されている和文フォントは機種によって異なるそうです。
端末のメーカーが独自にフォントを追加していたり、Officeソフトなどにフォントが付属している場合がある。

参考

標準の日本語フォント / もうパンツはかない

2021年に最適なfont-familyの書き方

【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

おすすめフォント

関連記事

可変フォントを使う(HTML/CSS)

Webフォントを使う(エックスサーバー)

先頭に戻る
ページの先頭に戻る