ワードプレス(WordPress)でホームページを作ったとき一番の問題は日本語のフォントの問題です。もちろん、フォントに気をあまり使わない人なら大丈夫かもしれませんが、僕のようにフォントに敏感な人々はたまらないはずです。ここでは、font faceを用いて簡単な方法で日本語フォントを変更する方法を紹介します。
1. 日本語フォントの準備
まず最初にすべきことはフォントを用意することです。フォントの姿も重要な問題ですが、もっとも重要なものはフォントファイルのサイズです。Webでは速度速くなければならないですから、ファイルのサイズが小さいフォントがいいです。自分のサーバーからダウンロードする予定なら1.0MB以下が適当です(ひらがなとカタカナだけのフォントはもちろん10kBぐらいのフォントもたくさんあります)。僕が推薦するフォントはM+ 1p regular フォントです。フォントのホームページはこちらですが、こちらで無料ダウンロードができます。Licenseもフリーですので安心しましょう。
2. TTFフォントをWOFFフォントへ変換
上記サイトでダウンロードしたフォントはmplus-1p-regular.ttfです。でもこのTTFタイプのフォントはサイズも大きいですし、Internet Explorerでは動作しないかもしれません。ですからこのTTFフォントをWOFFタイプへ圧縮しなければならないです。圧縮は下記のサイト
http://everythingfonts.com/ttf-to-woff
で易しくできます。そうすると1.3MBのmplus-1p-regular.ttfが800kBのmplus-1p-regular.woffになります。
3. 自分のサーバーにフォントをアップロード
mplus-1p-regular.woffフォントを自分のサーバーの適当な位置(一般的にはRoot)へアップロードします。
4. CSS 編集
自分のホームページのスタイルを担当するstyle.cssを開けてもっとも上段の部分に
@font-face{ font-family: mplus-1p-regular; src: url('/mplus-1p-regular.woff'); format('woff');}
のようにコードを追加します。また、例えば
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ font-family: mplus-1p-regular, sans-serif; font-size:100%; font-style:inherit; font-weight:inherit; }
のようにfont-familyでmplus-1p-regularを指定しておきます。これで終わりました。もちろんお金を投資するとこれより小さくて綺麗なフォントを求めることができるかもしれませんよ。
4 Comments
[…] 記事:http://www.leunkim.com/others/word-press-tips/wordpress-japanese-font/ […]
[…] スタイルシートに記入して後は以降にあるFont-familyをcinecaptionに変更するだけ。 フォントサイズはでかいのでwoff形式に圧縮した方が良いのかも。IEでは動作しない可能性も示唆されているので、年のためにコンバートをしました。 情報元:Leun Kim’s Blog 記事:http://www.leunkim.com/others/word-press-tips/wordpress-japanese-font/ […]
와 카테고리 너무 깔끔하다 ㅠㅠ 카테고리관련 플러그인 쓰시는건가요?
방문 감사드립니다! 헤헤 아닙니다. 그냥 Enhanced Text를 위젯에 추가한 후에 노가다 코드를 써 줬습니다..OTL
괄호 숫자의 경우, 카테고리의 포스트 숫자를 불러오는 코드로

를 썼습니다.
こちらの記事を参考にいたしました。
丁寧かつ端的に記載してくださっているので、素人でもなんなくフォント変更ができました。
ありがとうございます。
これからも、こちらのサイトを参考にいたします。
コメント有難うございます!助けになれてよかったですね。今後も宜しくお願いいたします!