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!? |
MS ゴシック |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
MS P明朝 |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
MS 明朝 |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
メイリオ |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
Meiryo UI |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
ヒラギノ角ゴ Pro W3 |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
ヒラギノ丸ゴ Pro W4 |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
ヒラギノ明朝 Pro W3 |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
游ゴシック |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
游ゴシック体 |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
HGP行書体 |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
HG正楷書体-PRO |
ABCDEFGHIJKLMNOPQRSTUVWXYZ!? |
英文字のフォント一覧については、『Easy Google Fonts』 で簡単にフォントを設定する。を参照。