
オリジナルのWebフォントアイコンを作れるサービス Glyphter
オリジナルで作ったSVGアイコンをWebフォント化してくれるWebサービス「Glyphter」を使ってみたらなかなかよい感じだったので、使い方も合わせてご紹介です。
サイトのデザインもかわいく分かりやすいです。オリジナルのものと既存のフォントも合わせることも可能です。
Glyphter: The SVG Font Machine
Webフォントアイコンを作る
オリジナルのアイコンを作る場合は、まず illustrator などで正方形にアイコンを作り、SVGファイルを生成します。
Glyphter へ行き、SVGファイルをグリッドの左上へドラッグ&ドロップします。ついでに他のアイコンも取り込みたい場合は左側からドラッグして追加します。ここでドロップしたグリッドのアルファベットが表示する際のフォントのコードになります。
各アイコン枠の右下にあるえんぴつマークをクリックすると、そのアイコンの編集ボックスが出現し、拡大や縮小回転などの編集を行えます。
編集やアイコンの追加が終わったら、上のツールバーにある「FONT↓」ボタンをクリックし、フォントファイルとCSSファイルをダウンロードします。
アイコンを表示する
ダウンロードしたfontsファイルをサーバーの適当な場所へアップロードします。一緒に入っていたCSSファイルにはアイコンの読み込み部分が記述されているので、CSSファイルの最初の方にコピー&ペーストします。CSSファイルからみたフォントファイルへのパスが間違っていないか気を付けましょう。
アイコンを表示したいセレクタへ font-family: ‘Glyphter’; を指定し、after 又は before 擬似要素と content プロパティでアイコンを挿入します。
具体的なCSSコードと表示例
P要素にAのグリッドに入れたアイコンを表示したいとした場合、CSSファイルは以下のような感じになります。
CSS
@font-face { font-family: 'Glyphter'; src: url('fonts/Glyphter.eot'); src: url('fonts/Glyphter?#iefix') format('embedded-opentype'), url('fonts/Glyphter.woff') format('woff'), url('fonts/Glyphter.ttf') format('truetype'), url('fonts/Glyphter.svg#Glyphter') format('svg'); font-weight: normal; font-style: normal; } p:before{ font-family: 'Glyphter'; content:"A"; }
HTML
<p>Webfonticon_A</p>
これで以下のように表示されました!
直感的に操作できてシンプルに使うことができます。私が一番いいなと思ったのは、フォントのコードがアルファベットな所で、他のWebフォントアイコンだと数字だったりするので、アルファベットだとサッと打ち込めてよいです。
オリジナルWebフォントアイコンを作れるサービスは他にも、❍ IcoMoonや、Fontello – icon fonts generator などがあります。
あと、Webフォントアイコンではありませんが、簡単にオリジナルのフォントを作れる面白いサービスもありました。少し触ってみましたが、なかなか使えそうなフォントを作るは難しかったです(笑)。
Glyphr Studio, the free HTML5 based font editor
No Comments & Tracbacks