ワードプレスで日本語Webフォントを適用してみよう!

Edited by Leun Kim

ワードプレス日本語フォント

ワードプレス(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-familyでmplus-1p-regularを指定しておきます。これで終わりました。もちろんお金を投資するとこれより小さくて綺麗なフォントを求めることができるかもしれませんよ。

 

 
I was born and raised in Daegu, S. Korea. I majored in electronics and math in Seoul from 2007 to 2012. I've had a great interest in math since freshman year, and I studied PDE in Osaka, Japan from 2012-2014. I worked at a science museum and HUFS from 2014 in Seoul. Now I'm studying PDE in Tokyo, Japan. I also developed an interest in music, as I met a great piano teacher Oh in 2001, and joined an indie metal band in 2008. In my spare time, I enjoy various things, such as listening music, blogging, traveling, taking photos, and playing Go and Holdem. Please do not hesitate to contact me with comments, email, guestbook, and social medias.



6 comments

  • […] スタイルシートに記入して後は以降にあるFont-familyをcinecaptionに変更するだけ。 フォントサイズはでかいのでwoff形式に圧縮した方が良いのかも。IEでは動作しない可能性も示唆されているので、年のためにコンバートをしました。 情報元:Leun Kim’s Blog 記事:http://www.leunkim.com/others/word-press-tips/wordpress-japanese-font/ […]

    • 방문 감사드립니다! 헤헤 아닙니다. 그냥 Enhanced Text를 위젯에 추가한 후에 노가다 코드를 써 줬습니다..OTL

      괄호 숫자의 경우, 카테고리의 포스트 숫자를 불러오는 코드로

      를 썼습니다.

  • こちらの記事を参考にいたしました。
    丁寧かつ端的に記載してくださっているので、素人でもなんなくフォント変更ができました。
    ありがとうございます。
    これからも、こちらのサイトを参考にいたします。