オリジナルのWebフォントアイコンを作れるサービス Glyphter

オリジナルのWebフォントアイコンを作れるサービス Glyphter

オリジナルで作ったSVGアイコンをWebフォント化してくれるWebサービス「Glyphter」を使ってみたらなかなかよい感じだったので、使い方も合わせてご紹介です。

サイトのデザインもかわいく分かりやすいです。オリジナルのものと既存のフォントも合わせることも可能です。
Glyphter: The SVG Font Machine
Glyphter

Webフォントアイコンを作る

オリジナルのアイコンを作る場合は、まず illustrator などで正方形にアイコンを作り、SVGファイルを生成します。
正方形のアイコン

Glyphter へ行き、SVGファイルをグリッドの左上へドラッグ&ドロップします。ついでに他のアイコンも取り込みたい場合は左側からドラッグして追加します。ここでドロップしたグリッドのアルファベットが表示する際のフォントのコードになります。
グリッドにドラッグ&ドロップ

各アイコン枠の右下にあるえんぴつマークをクリックすると、そのアイコンの編集ボックスが出現し、拡大や縮小回転などの編集を行えます。
アイコンを編集

編集やアイコンの追加が終わったら、上のツールバーにある「FONT↓」ボタンをクリックし、フォントファイルとCSSファイルをダウンロードします。
「FONT↓」ボタンをクリック

アイコンを表示する

ダウンロードした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フォントアイコンだと数字だったりするので、アルファベットだとサッと打ち込めてよいです。

オリジナルWebフォントアイコンを作れるサービスは他にも、❍ IcoMoonや、Fontello – icon fonts generator などがあります。


あと、Webフォントアイコンではありませんが、簡単にオリジナルのフォントを作れる面白いサービスもありました。少し触ってみましたが、なかなか使えそうなフォントを作るは難しかったです(笑)。

Glyphr Studio, the free HTML5 based font editor

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能