手書きフォントプラグインのwp-tegakiとお別れし、WEBフォントへ移行

今まで、このブログで長らく愛用させていただいたWordPress手書きフォントプラグイン(wp-tegaki)を止め、WEBフォントへ切り替えてみました。

wp-tegakiは、テキスト文字を任意のフォントで画像化してくれ大変重宝していましたが、時々、不具合に見舞われることもあり、ここ１〜２日以内で手書きフォントが表示されなくなってしまいました。

他のプラグインとの相性などによる原因かもしれませんが、もうこれからは、WEBフォントを使った方がいいのかな〜と言うことで、断腸の思いでwp-tegakiを停止しました。

ただ、wp-tegakiを停止しただけだと、過去に書いたwp-tegakiのショートコードが、そのまま残り、ショートコードが表示されてしまい、みっともないので、Search Regexのプラグインを利用して置換します。

を<span>へ、tegakiのクラスを残して、HTMLタグに置換。spanでなくてもpでもdivでも良いかと思います。

[/tegaki]を</span>へ置換

これで、ショートコードは表示されなくなりますね。

次に、せっかくなので、tegakiクラスにWEBフォントを適用しました。

こちらを参考にさせて頂きました。（感謝）
日本語Webフォントをタイトルに試してみる | overfree

簡単に説明すると、WEBフォントをサーバ内にダウンロードし、style.cssにtegakiクラスを作成し、下記のようなCSSを追記するだけです。

@font-face {
    font-family: 'HuiFont29';
    src: local('HuiFont29'),
         local('HuiFont29'),
         url('HuiFont29.ttf') format('truetype');
}

@font-face {
    font-family: 'HuiFont29';
    src: url(HuiFont29.eot);
}

.tegaki {
        font-family: 'HuiFont29', 'serif';
        font-size: 14px;
        font-size: 1.4rem;
}

この方法だと、いろんなWEBフォントを利用することができ、タイトルなどにも適用できる反面、テーマを変更する毎に修正する手間が入ります。

テーマ変更を頻繁にする方や、CSS等の編集が億劫な方は、やはりwp-tegakiのプラグイン利用の方が便利かと思います。