ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - Web Fontの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2015/05/09

PaymentFont - 決済関係アイコンの詰まったWeb Font

Eコマースで必須の機能と言えば決済です。その決済手段も昔であればクレジットカード、銀行振り込み、代引きくらいだったかも知れませんが、今では場合によってはBitCoinを使う場合もあるかも知れません。そんな多彩になっている決済に関する各種アイコンをWeb Font化したのがPaymentFont

List

  • 2015/04/29

Japont – 日本語Web Fontをダイナミックに生成

Web Fontが流行っていますが、日本語はなかなか広まりません。なぜかと言えば、欧文フォントに比べて日本語フォントは文字数が多く、サイズが肥大化する傾向にあるからです。いくら綺麗でもダウンロードに時間のかかるフォントは使えないでしょう。そのため、日本のWeb Font配布サービスではページ上で使われているフォントだけ...

List

  • 2015/03/18

localFont - Web FontをlocalStorageを使ってキャッシュ

Web Fontを使うとこれまで画像で作っていたロゴのようなものをテキストで表現できたり、さらにアイコンフォントのように大きさや色を自由に決められるアイコンが使えるようになります。問題点としては画像一つに比べるとデータ量が多く、サイズが大きくなってしまうことでしょう。そこで使ってみたいのがlocalFontです。## ...

None

  • 2015/03/12

Webify – TrueType Fontから他のWeb Font用フォーマットを生成

Web FontはTrueType Fontを用意すれば終わりではなく、ブラウザに応じて対応するフォントの種類が異なるので複数用意しなければなりません。TrueType、Embedded OpenType、Web Open Font Format、SVGの4種類が基本です。せっかくフォントを作ったのに、さらにそんな各フ...

List

  • 2015/02/28

Plumin.js – Web Fontを動的に生成するJavaScriptライブラリ

最近はWebフォントが人気です。アイコンのように使ったり、ロゴのように使うこともできます。しかし基本的にWebフォントはTrueType Fontなどのファイルを用意しておいて使われているでしょう。もっとWeb Fontをダイナミックにプログラマブルに扱おうというソフトウェアがPlumin.jsです。動的にWeb Fo...

List

  • 2015/01/29

webfont-dl - Web Fontのダウンローダー

最近人気のWeb Font。元々ブラウザは対応していたものの、ネットワーク経由でサイズの大きなフォントファイルの送信を控えていました。しかし最近はネットワークも高速化し、他のメディアも十分に大きくなってきたことで現実的になっています。Googleが配布しているWeb Fontがありますが、そうしたWeb Fontをダウ...

List

  • 2014/12/26

Material Design Fonticons – GoogleマテリアルアイコンのWeb Font版

マテリアルデザインにおいてアイコンは大事な存在です。これまではラベルの補助だったのが、よりアイコンだけでも意図が伝わるようにしなければなりません。そのためにはちょっとした変化を含めてアイコンの種類がもっとたくさん必要です。そこでGoogleもアイコン集を提供している

List

  • 2014/10/30

jQuery-FontSpy.js – Web Fontの読み込み完了、失敗をハンドリング

最近はWeb Fontを使うサイトが増えてきました。ロゴとして使うケースもありますが、その多くはアイコンフォントとして使っているようです。アイコンフォントの場合、Web Fontの読み込み前や読み込みに失敗すると四角が表示されてしまうのが難点です。アイコンとテキストであればまだいいですが、アイコンだけを使っている場合は...

List

  • 2014/08/01

Devicons - 技術系サービスをまとめたWeb Font

開発者向けにWebサービスを提供しようと考えたことはあるでしょうか。Webサービスを作るためのWebサービス、アプリを開発するためのWebサービスなどです。ITリテラシーが高い層に向けて提供するサービスは、変な技術を使う訳にはいきません。そこで使ってみたいのがDeviconsです。開発者がよく使うようなサービス、技術を...

List

  • 2014/07/17

inuicon – pplogの中で使われているアイコンフォント(Web Font)

最近は画像でアイコンを表示する代わりにWeb Fontを使うケースが増えてきました。Font Awesomeをはじめとして、公開されているものを使うのは容易ですが、自分のために新規で作成するというのは難しい印象があります。そんな中、参考にしてみたいのがinuiconです。pplog.net

List

  • 2014/07/06

jQuery fontIconPicker - Web Fontを使ったアイコンピッカー

Web Fontを使ったフォントアイコンはデザイン上で色々な場面で使えますが、さらにユーザに選ばせたりする上でも便利な代物です。しかし元々はテキストであり、Web Fontが入っていないと豆腐になってしまうため、そのUIが問題になります。そこで使ってみたいのがjQuery fontIconPickerです。ドロップダウ...

List

  • Premium_s 2014/07/05

業務で使えるオープンソース(115)「Web Font」

今回のテーマはWeb Fontです。アイコンとして使うほか、オープンソースのフォントを中心にWeb Fontを提供するソフトウェアが増えています。そこでWeb Fontを使うメリット/デメリットと関連オープンソース・ソフトウェアを集めました。# 利点## サイズ、色が自由に変えられるWeb Fontの最大のメリットがサ...

List

  • 2014/07/04

Octicons - GitHubで使われているWebFont

他のサイトで使われているリソース、フレームワーク、画像などが気になるということはよくありますよね。そんなとき、有償のものだとちょっと高くて手が出せない場合もあります。しかしGitHubが自社サイトで使っているアイコンリソースをOcticonsとして公開しました。これでGitHub内で気になったアイコンであればすぐに使え...

List

  • 2014/03/27

Font-Awesome-SVG-PNG - Font AwesomeをSVG/PNGとして取り出す

これは使いどころが多そう!Font AwesomeはWeb Fontをアイコンとして使えるので便利なライブラリです。便利さ故に他のケースでも使いたいと思うのではないでしょうか。また、一つのアイコンだけを使うためにWeb Font全体を読み込むのは大変です。そこで使ってみたいのがFont-Awesome-SVG-PNGで...

List

  • 2014/03/05

Stackicons – マルチカラー表示もサポートしたソーシャルアイコンのWeb Fonts

今はWebサービスがたくさん存在します。そうしたサービスのアイコンを自分のサイト上に載せたいと思うことは多々あります。一番多いのはFacebook/Twitterなどのソーシャルサービスのアイコンや、GitHubのアイコンです。画像でも良いのですが、大きさや色を変えたいとなるとWeb Fontsの方が都合がいい場合もあ...

List

  • 2014/02/27

jQuery fontIconPicker - Web Fontを使ったアイコンピッカー

Web Fontを使ったアイコン表示は幾つかありますが、基本はWebサイト上でアイコン代わりに使うことが多いと思います。もちろんそれでも有益ですが、もっと面白い使い方もできるのではないでしょうか。今回はその一つとしてjQuery fontIconPickerを紹介します。フォームの入力項目としてWeb Fontを使うラ...

List

  • 2014/01/27

FontAwesome Finder - FontAwesomeを便利に使うための検索ツール

FontAwesomeって369種類のアイコンを提供しているそうですよ!Bootstrapを使っていてアイコンが少なくて物足りないなと思ったら次に手をつけるのがFontAwesomeです。Web Fontとして多数のアイコン風フォントを提供しています。しかし数が多いと探すのも大変です。そこで使ってみたいのがFontAw...

List

  • 2013/11/21

Prefectly - 使おう!WebFontとCSSを使った日本地図

誰かが作ってくれると思っていた!Stately

List

  • 2013/10/30

Ionicons – 必見!iOS 7風、ソーシャル系アイコンも取り揃えたWeb Font

またしても使い勝手の良さそうなアイコンフォントが出てきましたよ!Bootstrapはアイコンの表示に際して画像を使っています。しかしそれでは大きさの変化や色の変更に柔軟に対応できません。そこでFont AwesomeではWeb Fontを使ってアイコンを提供する形をとっています。今回紹介するIoniconsもまた同様に...

List

  • 2013/07/28

Web Fontを使ってフォントデザインの差分表示「Tiff」

Tiffはnode/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。フォントの世界はとても深く、ぱっと見では分からない詳細なところにまで心が行き届いていたりします。そこで使ってみたいのがTiffです。二つのフォントの差異をビジュアル的に確認できるソフトウェアで...