手書きフォントを自作し、サイト上で使用する

自分で簡単なフォントを作ってみたくなったので、その方法をメモする。

（１）以下の Caligraphr のサイトに登録する。

Calligraphr – Draw your own fonts.
https://www.calligraphr.com/en/

（２）「TEMPLATE」（テンプレート）を作成し、ダウンロード。

（３）２の TEMPLATE を印刷するなりして、自作したいフォントを記入する。

（４）記入した３（スキャンしたものでもいいし、写真に撮ったものでもいい）を Caligraphr のサイトにアップロードする。

（５）「Build Font」でフォントを作成。OpenType および TrueType 形式のフォントをダウンロードできるようになる。これで自分のパソコンにインストール可能となる。

非常に簡単だ。私は TEMPLATE を iPad Pro に入れて、Apple Pencil でフォントを描いた。マウスで描くのは大変だからね。

Mac ではフォントファイルをダブルクリックすればインストールができる。

＊＊＊

iOS にフォントをインストールするには AnyFont というアプリを使えばいい。

AnyFont on the App Store
https://itunes.apple.com/us/app/anyfont/id821560738?mt=8

さらに、自作フォントを使ったサイトを作ってみることにした。まずは Web フォントに変換する必要があるが、「WOFF コンバータ」というソフトを使うか、Webfont Generator というサイトを使えばいい。EOT ファイルというものも一緒に作成することで、Internet Explorer の表示にも対応できる。

WOFFコンバータ
https://opentype.jp/woffconv.htm

Create Your Own @font-face Kits " Font Squirrel
https://www.fontsquirrel.com/tools/webfont-generator

サイトの作成は私は Adobe Muse を使えば簡単にできた。

Adobe Muse CCの購入 | コードを記述せずにwebサイトをデザイン＆構築
https://www.adobe.com/jp/products/muse.html