(32) 【WORDPRESS】プラグインで独自フォントを組み込む

投稿者: | 2017年8月29日

WordPressの仕組みで正しいやり方があるのだと思うのですが…

今回はプラグインで独自フォントを組み込んでみます。

■プログラム

たったこれだけで独自フォントプラグインが作れます。
※一部の古いブラウザはTTFファイルに未対応です。
※その場合は、WOFFファイルで公開されているフォントを試してみてください。

addorgfont.php

<?php
/* Plugin Name: Add Org.Font */
////////////////////////////////////////////////////////////////////////
if (class_exists('AddOrgFont')) {
  $obj = new AddOrgFont();
}
////////////////////////////////////////////////////////////////////////
class AddOrgFont{
  public function __construct() {
    add_action('wp_head', array($this,'proc_my_add_css'), 1);
  }
  public function proc_my_add_css() {
    $font_path = plugins_url('MyFont.woff',__FILE__);
echo <<< EOM
<style type="text/css">
@font-face {
  font-family: MyFont;
  src: url({$font_path}) format("truetype");
}
</style>
EOM;
  }
}     // end of class
?>

■作成手順

1) フォントファイルをダウンロードします。
2) 上記プログラムをテキストファイル「addorgfont.php」(文字コード UTF-8)として保存します。
3) 上記1),2)のファイルを同じディレクトリに置き、一つの ZIPファイル「addorgfont.zip」にまとめます。
4) 「プラグイン」-「新規登録」メニューにて、addorgfont.zip をアプロードし、有効化します。
5) WordPressの投稿文の中で以下のように使います。

<p style="font-family:MyFont>
どうでしょう?
</p>

コメントを残す

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


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)