WordPress でカスタムフォントを利用する
以前手書きフォントをサイト上で使用する方法を書いた。
手書きフォントを自作し、サイト上で使用する | 読書ナリ
https://dokusho.nary.cc/2018/04/19/creating-custom-fonts/
その時は最終的なサイトの作成で Adobe Muse を使用した。
これを WordPress 上で実現したい。すなわち、WordPress 上で自作フォント(自分で作ったフォントファイル)の入力ができるようにしたい。
最初は次の方法を試したが上手くいかなかった。
ワードプレスでWebフォントを使用する方法
http://tsuchiyashutaro.com/archives/17703
次に試したのがプラグインを使用する方法だ。いろいろなプラグインを試して、簡単に実現できるものを見つけた。
(1)Font Organizer というプラグインを WordPress にインストールする。
Font Organizer
https://wordpress.org/plugins/font-organizer/
(2)WordPress の管理画面で Settings 内に Font Settings というメニューができるので、クリック。
(3)「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 はテキストエリアの高さを行数で指定する。
そうすると、こんなことができるようになる。
![](https://dokushonary.material.jp/pics/uploads/big/15015464ec45ddd1b03b933721b2b34b.png)
参考:
HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】 | TechAcademyマガジン
https://techacademy.jp/magazine/5864