WordPressにモリサワのWebフォントを導入してみた

2016年6月29日に発表された、「モリサワのWebフォント30書体が「さくらのレンタルサーバ」で利用開始」というプレスリリースを見た。さくらのレンタルサーバでWordpressを利用している場合、モリサワのWebフォント「TypeSquare」で提供中の書体の中から30書体を追加料金なしで利用できる、というものである。このblogは、たまたまさくらのレンタルサーバ上に乗っかっているので、試しに導入してみることにした。

モリサワwebフォントの導入手順

ザックリとした導入までの流れとしては、以下のような感じ(すでにWordpress導入済みの場合)。手順に沿えば、そんなに難しくはない。

  1. サーバコントロールパネルでWebフォントを使用するサイトを指定する
    • 1つのドメインしか利用できない模様
  2. Webフォントを使用するための、Wordpressのプラグインをインストールする
  3. プラグインの設定で、使用したいフォントテーマを設定する
    • プリセットされているテーマ以外に、タイトル・リード・本文・太字の4つのカテゴリごとに使用するフォントを自分で指定することも可能

導入のためのマニュアルもきちんと用意されている。

導入結果

というわけで、このblogにWebフォントを設定してみた。昔から新ゴが好きすぎるので、新ゴだらけ。ただ、予めCSSでフォント指定をしてたりするとイマイチうまく動かないパターンがあるので(というか実際そうだった)、そういう場合はCSSに少し手を入れる必要がありそう。

それよりもっと問題なのは、使用するブラウザによって割と見え方が違うらしく、PCのchromeで見るとなんかあんまり綺麗に表示されない。IE11だと割と綺麗。ここはもうひと手間必要かも…?

この辺を参考にしつつ、もうちょっといじってみるつもり。諦めるかもしれないけど。

ちなみにこのWebフォント、一応「月間2.5万PVまで」ということみたいなので、念のため。