• HOME
  • BLOG
  • WebFont
  • QUQJPオリジナルフォントをfontstructでつくってみた!

QUQJPオリジナルフォントをfontstructでつくってみた!

QUQJPサイト上でつかってる、文字を、
オリジナルフォント作成サービス、fontstruct.comを使って
QUQJPフォントを作ってみました!

フリーランスになって今のアイコンにした時に、
オリジナルのフォントを作っていたのですが、
(作っていた、といっても、Illustrator上でABC…と作っただけ…)
webfont化してみたく、ちゃんとしたフォントファイルを作成しようと思いました。

しかし、フォントを作成するアプリが高かったり、
ちょっと1つ作るだけなのに、かなり敷居高く実現できずにいました。

そこで、いろいろ調べていて fontstruct.com というサービスを発見しました!

fontstruct

fontstruct は、Flashベースで作られた Web上でフォントをつくれるサービスです。
作ったフォントは、.ttfファイルとしてダウンロードすることができます。

このサービスは、予め単位となる図形が用意されており、
それを配置していくことでフォントを構築していきます。

Illustratorなどで作ったデータの変換はできません。
このfontstructサービス上で1から作っていく必要があります。

しかし、非常にシンプルでわかりやすいUIと
編集機能も手が届いていてかなり良い感じです。

Galleryには、みんなが fontstruct で作ったフォントが、公開されています。
fontstruct でこんなすごいのが作れるのか!と驚いてしまうようなフォントが並んでいます。

それでは、Fontをつくる画面をみてみます。

先に、fontstruct で、アカウントを作成し Sign inします。
初めて Sign in すると、フォントの新規作成のダイヤログが表示されると思います。

編集画面:

FontStruct | FontStructing | quqfont-2

編集画面のグリッドの細かさは、Zoomの設定で変更できます。
ドット文字から、なめらかな文字まで対応できると思います。

ツールなどには、ショートカットキーが設定されているので、
(例えば、鉛筆ツールは[B]、消しゴムは[E])
編集作業もサクサク行えます!

できたフォントはこちら、

QUQ.JP ORIGINALFONT
ABCDEFGHIJKLMNO
PQRSTUVWXYZ.
1234567890?!$

せっかく作ったので、このブログにwebfontとして導入してみました。
もともと画像だった、

  1. ロゴ部分
  2. サイドバーのタイトル
  3. フッターのリンク

の部分を、webfont化しています。

次のエントリーでは、webfontのつくりかた、導入についてまとめたいと思います。