手書きフォントを自作し、サイト上で使用する
自分で簡単なフォントを作ってみたくなったので、その方法をメモする。
(1)以下の Caligraphr のサイトに登録する。
Calligraphr – Draw your own fonts.
https://www.calligraphr.com/en/
(2)「TEMPLATE」(テンプレート)を作成し、ダウンロード。
(3)2の TEMPLATE を印刷するなりして、自作したいフォントを記入する。
(4)記入した3(スキャンしたものでもいいし、写真に撮ったものでもいい)を Caligraphr のサイトにアップロードする。
(5)「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