WordPress でカスタムフォントを利用する

以前手書きフォントをサイト上で使用する方法を書いた。

手書きフォントを自作し、サイト上で使用する | 読書ナリ
https://dokusho.nary.cc/2018/04/19/creating-custom-fonts/

その時は最終的なサイトの作成で Adobe Muse を使用した。

これを WordPress 上で実現したい。すなわち、WordPress 上で自作フォント（自分で作ったフォントファイル）の入力ができるようにしたい。

最初は次の方法を試したが上手くいかなかった。

ワードプレスでWebフォントを使用する方法
http://tsuchiyashutaro.com/archives/17703

次に試したのがプラグインを使用する方法だ。いろいろなプラグインを試して、簡単に実現できるものを見つけた。

（１）Font Organizer というプラグインを WordPress にインストールする。

Font Organizer
https://wordpress.org/plugins/font-organizer/

（２）WordPress の管理画面で Settings 内に Font Settings というメニューができるので、クリック。

（３）「2. Custom Fonts」でフォントファイルをアップロードする。対応するファイル形式は woff / woff2 / ttf / otf / svg / eot 。

・Font Name：適当な名前（英数字がいいだろう）を付ける。
・Font Weight：フォントのウェイトを指定する。
・Font WEight File：アップロードするファイルを指定する。

たったこれだけだ。投稿画面で Visual モードにしてフォントを選べるようになる。

＊＊＊

もし、テキストエリア内で自作フォントの入力をしたいなら、以下のようなコードになるだろう（Text モードでの編集）。

<textarea style="font-family: MyFont; font-size: 200%;" cols="30" rows="10"></textarea>

・MyFont は適宜自分のフォント名に変更する。
・font-size でフォントの大きさを指定する。
・cols はテキストエリアの幅を文字数で指定する。
・rows はテキストエリアの高さを行数で指定する。

そうすると、こんなことができるようになる。

参考：
HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】 | TechAcademyマガジン
https://techacademy.jp/magazine/5864