初めまして、マツバトモヒロです。ノーニューフォークスタジオを立ち上げるにあたってデザインなどを担当する事になりました。
僕はWordPressでのwebデザインは初経験です。このブログでは学習したことを記していこうかと思っています。
M+というフリーで高品質な日本語フォントがあります。
ウェイトが７種類用意されていて、それぞれ和文で２種類・欧文可変幅が４種類・欧文固定幅が２種類と多くの字形が用意されているため、使い勝手のよい書体です。
M+はwebフォントとして誰でも簡単に利用できるようになっているので、それを利用したサンプルを作ってみました。
WordPressでの設置方法
WordPressでの設置方法は簡単です（この記事を書くほうが時間かかりました）。
方法その１・ヘッダーに書き加える
ダッシュボードから「外観→テーマ編集」→「ヘッダー（header.php）」の編集へと進み、headの中からlinkタグの部分を探します。
linkは何行かあるので、適当な行の間に
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css"/>
と書き加えます。
これはM+の用意したCSSを読み込むという指定です。このCSSの中から必要なfont-familyを直接指定して使います。
あとは投稿の際にスタイルとして指定すれば、webフォントを利用できるようになります。
例
SAMPLE TEXT あいうえお サンプルのテキスト［M+1P REGULAR］
これが下のようになります↓
SAMPLE TEXT あいうえお サンプルのテキスト［M+1P REGULAR］
方法その２・CSSに書き加える
次にファミリーを１つずつ読み込む方法です。
ダッシュボードから「外観→テーマ編集」→「スタイルシート（style.css）」の編集へと進みます。
適当な場所に以下を書き加えます（M+1P Regularの場合）。
@font-face
{
font-family: mplus-1p-regular;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf')
format("truetype");
}
「mplus-1p-regular.ttf」の部分は適宜必要な書体に変更します。
スタイルシートの編集が終わったら、同じく投稿の際にスタイルとして指定することでwebフォントを利用できるようになります。
和文＋欧文可変幅の字形サンプル
SAMPLE TEXT あいうえお サンプルのテキスト［M+1P REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+1C REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2P REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2C REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+1P BOLD］
SAMPLE TEXT あいうえお サンプルのテキスト［M+1C BOLD］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2P BOLD］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2C BOLD］
M+1Pでのサイズ違いサンプル
8px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］
10px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］
12px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］
13px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］
15px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］
20px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］
30px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］
40px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］