日本語フォントを設定する

投稿者: | 2016年6月28日

wordpressは無料で使えてとても便利なのですが、ほとんどの無料テーマが英語のため、日本語でサイトを作る場合、文字が美しくなくなってしまします。
そこで、フォント種類を別途設定するのですが、その設定方法についてまとめたいと思います。

HTMLで指定する

font 要素に face を追加します。

<font face=”MS Pゴシック”>あいうえお</font>

表示するフォントは、閲覧に利用しているコンピューターにインストールされているフォントしか表示されません。
色々なユーザに対応するため、複数フォント設定したい場合は、優先度の高いフォントから設定します。

<font face=”MS Pゴシック”,メイリオ,sans-serif>かきくけこ</font>

スタイルシート(CSS)で指定する

font-family を使用して設定します。

p {font-family: “MS Pゴシック”,メイリオ,sans-serif;}

日本語フォントの表示サンプル一覧

MS Pゴシック

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

MS ゴシック

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

MS P明朝

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

MS 明朝

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

メイリオ

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

Meiryo UI

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

ヒラギノ角ゴ Pro W3

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

ヒラギノ丸ゴ Pro W4

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

ヒラギノ明朝 Pro W3

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

游ゴシック

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

游ゴシック体

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

HGP行書体

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

HG正楷書体-PRO

ABCDEFGHIJKLMNOPQRSTUVWXYZ!?
あいうえお かきくけこ 日本語漢字
1234567890☆♡

英文字のフォント一覧については、『Easy Google Fonts』 で簡単にフォントを設定する。を参照。