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

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

手書きフォントを自作し、サイト上で使用する | 読書ナリ
https://dokushonary.com/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 はテキストエリアの高さを行数で指定する。

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

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

> 本記事のタイトルとURL をコピーする <

書籍