手書きフォントを自作し、サイト上で使用する
- コンピューター
- 2018/04/19 Thu 07:26
自分で簡単なフォントを作ってみたくなったので、その方法をメモする。
（１）以下の 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