日本語WebFontを使う

webfontこのサイトのWordpressテーマを作成しているArtisteerが4.1βになってまして、色々と機能が増加しているんですがその中でフォント指定にGoogle Web Fontを使えるようになっています。

Web Fontを使えるとサイトの表現力は高くなりますね。ワープロで作成した文書と同じでタイトルはゴシックで本文は明朝、強調は太ゴシックってな感じで。

でもGoogle Web Fontにはまだ日本語フォントは登録されていませんし、日本語フォントが使える無料サービスってのもまだまだ少ないです。デコもじというサービスは無料で使えますが無料では1書体しか使えません。(ただWordpressだと専用プラグインがあるのでは導入ハードルは低くなります)

なのでいまのところ日本語Web Fontを使うには自前で準備しないといけません。

  1. フリーで使えて形式変換許可のある日本語フォントを探す
  2. 通常配布されているttf形式だとIEで表示されないのでeot形式に変換する
  3. サーバーのルートにttfとeotをアップして、スタイルシートを書き換える

以上のステップを踏めばOKだと思います。

まず1のステップでは Love & Pointcard さんのサイトを参考にさせてもらって 梅フォント和田研細丸ゴシック をダウンロードしました。FirefoxとChromeなどでは配布されている ttf 形式でいいようですが、IEだとダメらしく eot 形式に変換するようなのでダウンロードしたttfファイルを ttf2eot サイトで変換します。これで1フォントあたり2つのファイルになります。

これをWordpressの場合はWordpressのルートディレクトリにアップロードしておきます。

最後にスタイルシートに

—————————————

/* Firefox, Opera, Safari */
@font-face {
font-family:任意のフォント名;
src:url(“web-font.ttf”) format(“truetype”)
}
/*IE*/
@font-face {
font-family: 任意のフォント名;
src: url(“web-font.ttf.eot”);
}

—————————————-

と追加すればOK。スタイルシートのできるだけ上部に入れたほうがいいようです。

で、実際に今のここがタイトルに和田研細丸ゴシックで、本文が梅明朝なんですけど、なんかいまひとつ見やすくない感じですね。カラーやサイズなどを含めたチューニングがもっと必要みたいです。


投稿日

カテゴリー:

,

投稿者:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です