オリジナルの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プラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS