約400種の欧文フォントが全部無料（商用可）でWebFontも使えちゃうFont Squirrelって素敵 / Maka-Veli .com
もう数年前にコリスさんやCREAMUさんで紹介されてましたが、恥ずかしながら知らなかったです。こんなに素敵なサイトがあったなんて。 最近DesignModoで紹介されていたので知りました。 すげー関係無いけどCREAMUさんのブログ超好きです 全部フリー 基本的には全て商用可。だそうです。 100% Free For Commercial Use. ただしフォントそれぞれにライセンスはあるので一応、要確認。 とても探しやすく、種類も豊富。400近くはあるんじゃないでしょうか？ 個人的には探しやすい点がとても気に入りました。 そしてもう一つ素敵なコンテンツがあったのですが Webfont kit がDLできる。そして作れる。 うちのサイト名やナビゲーション等に@font-faceでLeague Gothicを使ってますが、この@font-faceでwebfont使う時に必要な
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。 まずは下記の画像をご覧頂きたい。 これはプロジェクトで私が使用していたスプライト画像だが（実際は縦にして使用）、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。 このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプ
クレジットカードや決済システムのアイコン素材はよく見かけますが、ベクターで手軽に扱えるちょっと珍しいWebフォント素材を紹介します。 Mastercard, VISAをはじめ、Amazon, Google Wallet, Paypalも揃ってます。あと、JCBもあるのは嬉しいですね。 アイコンは全部で36種類、Mastercard, VISA, Amex, JCBなどのクレジットカードをはじめ、Amazon, Google Wallet, Paypalなどのウェブ決済も揃っています。 Mastercard Maestro Visa Visa Electron American Express Postepay Cartasì Diners Club Discover Union Pay Electronic Cash TrustE Amazon JCB Google Wallet Stri
去年の10月に「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】」というタイトルのエントリーで、Web Symbols TypefaceというWebFontを使って、タイプフェイスでアイコンを表示する方法について紹介しました。それ以来、似たようなFontが作成され公開されていますが、つい最近知ったsymbolsetというサイトで紹介しているsymbol fontには感心しました。 それまでのSymbol Icon Webfontには、それを使用する際の表現としてあまり適切でない部分がありました。アルファベットの「t」などに直接アイコンを割り当てていたため、code上では意味を成さない（コンピュータに理解できない）文字が並ぶことになってしまいました。そのため私が使用するときは、HTMLでは意味のあるの文字列（Twitterなど）を記し、CS
Brandon Grotesque Font Family was designed by Hannes von Döhren and published by HVD Fonts. Brandon Grotesque contains 12 styles and family package options. More about this family FREE 30-DAY TRIAL of Monotype Fonts to get over 150,000 fonts from more than 1,400 type foundries. Start free trial
Electronさわってみました アイコンフォントを作り直す案件があり、位置調整やサイズ感の確認のたびにコマンド叩くのも、（リモートの）デザイナーさんとやりとりするのも大変だなということで、デザイナーさん向けの検証用のツールを作りました。 ゴール: GUIでSVGからwebfontに変換できるようにする github: svg2webfont に置いてます。 ツールとしては、ブラウザ上で使えるIcoMoon や fontello に近いものです。 もちろんこれで不便なければこちらを使えば良いのですが、 unicodeとアイコン名が対応しているjsonファイルが欲しい web上のサービスに依存するのが怖い（手元でやりたい） 一度作ってしまえばどのプロジェクトでも使いまわせそう Electronで何か作ってみたかった（重要） ということで、お試しでつくってみました。 Electronを使う利点
orlandotm/payment-webfont GitHub amazon、各種クレカなど決済用のWEBフォント「payment-webfont」 次のようなクレジットカードから各種サービスのロゴがあつまったWEBフォント。 こういうのもフォントで表現したいという場合は使えそうです 関連エントリ 大量のフォントから好きなフォントだけ抜き取ってWEBフォント化できる「Font Combiner」 サイトのフォントを特定のWEBフォントでプレビューできる「TypeWonder」 FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」
Elusive-Icons Webfont
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws. When downloading this font you’ll also receive all the icons in .svg vector format so you can play with them, improve the
複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。 ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWebフォントを簡単に作成できます。 Webfontの特徴 アイコンを自由に組み合わせ 手元のアイコンを自由に組み合わせて、SVG対応のWebフォントのセットを作成できます。既存のフォントをインポートすることも可能です。 フォントのカスタマイズ アイコンをカスタマイズして、フォントに名前を付けることができます。 フォントのエクスポート フォントには1クリックでエクスポートできます。HTMLやCSSファイルも生成されるので、簡単に利用できます。 フォーマットは、.svg, .ttf, .eot, .woff, .woff2 コラボレーション メンバーを招待し、チームを作成して、共
FF Dingbats 2.0 Font Family was designed by Johannes Erler, Olaf Stein, Henning Hartmut Skibbe and published by FontFont. FF Dingbats 2.0 contains 14 styles and family package options. More about this family FREE 30-DAY TRIAL of Monotype Fonts to get over 150,000 fonts from more than 1,400 type foundries. Start free trial
今回はCSS3で新たに導入された@font-faceと、 Webfontについての説明をします。 なお、管理人はOpera 10.0 Betaで作成していますので、その他のブラウザでは多少挙動が違うかもしれません。 Webfontというのは、 ユーザーの環境に用意されてないフォントでもWebサーバーにそのフォントが用意されていれば、そのユーザーの環境でもそのフォントが表示できるシステムです。 例えば、CSSでこの様な表記をするとします。 body { font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif; } Windowsユーザーでヒラギノをインストールしている人は少ないと思います。 ですので、こう指定したところで観覧するユーザーにヒラギノがインストールされていなければ、ヒラギノでは表示されませんので無意味です
他のサイトで使われているリソース、フレームワーク、画像などが気になるということはよくありますよね。そんなとき、有償のものだとちょっと高くて手が出せない場合もあります。 しかしGitHubが自社サイトで使っているアイコンリソースをOcticonsとして公開しました。これでGitHub内で気になったアイコンであればすぐに使えるようになります。 Octiconsの使い方 OcticonsはSVG、TrueTypeフォントで公開されています。そのためWebFontとしてプロジェクトに組み込めるようになっています。 16px/32pxの両方で表示できるようになっています。アイコンはユニコードとして設定されています。実際に使われているものなので、どういったアイコンがどういった意図で作られているのかも分かりやすいですね。 OcticonsはSIL Open Font Licenseのオープンソース・ソフ
手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT | Stronghold Archive
手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT どうもこんばんは。今回のtipsは【手持ちのフォントをWEBフォント用に一括変換してくれるサービス @FONT-FACE GENERATOR】です。正直最近利用しているサービスの中では、ずば抜けて便利なツールのひとつです。PC内の.ttfフォントを.svg、.eot、.woffに変換しさらにフォント指定する為のCSSや表示確認用HTMLも用意してくれます。 @FONT-FACE GENERATOR .ttfから.svg、.eot、.woffへ変換 細かい設定をする場合は【EXPERT】を選択し、フォントをアップロード【Add Fonts】してください。ただご利用の際には、フォント自体のライセンスにはご注意ください。基本的にはすご
TypekitのようなWebフォントサービスでは... / Webフォントは読み込みが完了するまでテキストに... / 特にJavaScriptでUIを制御している場合...他...全11件 TypekitのようなWebフォントサービスではなく自前のWebフォントを使用する場合、フォントがいつ読み込まれたのかを判断することができません。 Webフォントは読み込みが完了するまでテキストに適用することができないため、一瞬違う書式のテキストが表示されたり、適用後にテキストの高さが変わってしまって、heightを指定している要素からはみ出すことがあります。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> <script type="tex
gulpでWebFont作成を自動化 | Web雑記帳
gulp-iconfontでweb-font作成を自動化 前の記事（WebFont作成をGrunt.jsで自動化）でGruntによるweb-font自動化をやったのですが、今日マークアップ勉強会がベースキャンプ名古屋で開催されていなたのでgulpでもやってみました。 参考 以下２つを参考に動かしてみました。[Tsutomu Kawamura]さんのコードを少しいじって動かした感じです。 https://www.npmjs.org/package/gulp-iconfont https://github.com/cognitom/symbols-for-sketch インストール 以下が今回インストールしたパッケージになります。 gulp gulp-consolidate テンプレートエンジンで使用 gulp-iconfont シンボルフォント作成の本体 gulp-rename gulp-w
FF Franziska Font Family was designed by Jakob Runge and published by FontFont. FF Franziska contains 20 styles and family package options. More about this family FREE 30-DAY TRIAL of Monotype Fonts to get over 150,000 fonts from more than 1,400 type foundries. Start free trial
Easily Identify, Test and Sample Any Webfont With Type Sample To install, simply drag the button below to your bookmarks bar:
Sketchetik Font Family was designed by Ossi Gustafsson and published by Hiekka Graphics. Sketchetik contains 5 styles and family package options. More about this family FREE 30-DAY TRIAL of Monotype Fonts to get over 150,000 fonts from more than 1,400 type foundries. Start free trial
Flat Line Icons WebfontはBootstrap向けに作られたフラットなアイコンフォントです。無料版と有料版があり、無料版は50、有料版は180以上のアイコンが用意されています。フォント形式はWOFF、SVG、TTF、EOTが用意されており、AI、EPSファイルが同梱されています。可愛らしくていい感じです。 Flat Line Icons Webfont
GitHub - sapegin/grunt-webfont: SVG to webfont converter for Grunt
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
誰かが作ってくれると思っていた！ Statelyというソフトウェアはアメリカの各州をWebFontとして作成し、スタイルシートで呼び出せるようにしたソフトウェアです。その地域全体を表現したいと言った時に便利なソフトウェアです。 アメリカがあるということは日本も各都道府県に分かれたWebFontがあればきっと便利な訳です。そんな夢を実現してくれたのがPrefectlyです。 表示例。 使い方は簡単で、まずはスタイルシートを読み込みます。 <link rel="stylesheet" href="assets/css/prefectly.css"> 後は以下のようなHTMLの記述をします。 <ul class="prefectly" id="plain"> <li data-pref="ac" class="ac">A</li> <li data-pref="am" class="am">B<
Proxima Nova bridges the gap between typefaces like Futura and Akzidenz Grotesk. The result is a hybrid that combines modern proportions with a geometric app...
This is a listing of all glyphs contained in the font, including OpenType variants that may only be accessible via OpenType-aware applications. Each basic character (“A”) is followed by Unicode variants of the same character (Á, Ä…), then OpenType variants (small caps, alternates, ligatures…). This way you can see all the variations on a single character in one place.
GruntでWebFont作成を自動化 | Web雑記帳
WebFont作成をGrunt.jsで自動化 WebFontを作成するサービスなどには、いろいろあり便利ですが、ちょっとした修正を入れる度にWebFont化するのは面倒くさいです。そこで、grunt-webfontという便利なプラグインがあったので自動化してみました。 ここでは、macにインストールしていきます。 下準備 homebrew node grunt ここらへんをインストールしておいて下さい。 インストール grunt-webfontのreadmeに沿ってインストールしていきます。 まずはhomebrewでfontforgeとttfautohintをインストールするのですが、 readmeにnodeエンジンを使用するならfontfogeは必須でないとあるので、 ここではttfautohintのみをインストールします。 $brew install ttfautohint cairo
FF DIN Font Family was designed by Albert-Jan Pool and published by FontFont. FF DIN contains 28 styles and family package options. More about this family FREE 30-DAY TRIAL of Monotype Fonts to get over 150,000 fonts from more than 1,400 type foundries. Start free trial
This is a listing of all glyphs contained in the font, including OpenType variants that may only be accessible via OpenType-aware applications. Each basic character (“A”) is followed by Unicode variants of the same character (Á, Ä…), then OpenType variants (small caps, alternates, ligatures…). This way you can see all the variations on a single character in one place.
ウェブフォント・アプリ・ゲーム用フォントのセット アプリへの埋め込み、日本語ウェブフォントへの使用、ロゴへの使用に対応できる個人の開発者向けフォント集。フォントデータが欧文Webフォント並みに軽量なので、Webサイトやアプリでも表示速度に影響を与えません。アプリ・ゲームやサイトなどにご自分で設置・実装できる方、HTMLでのCSS記述やWordpressが使える方向けです。漢字部分はOS内蔵フォントもしくは他のフォントで補完して下さい。フォント形式はTrueType、OpenType、ウェブフォント向きのWOFF・eotの4種類を収録。商用でも安心して使えるデザインの楽しみを広げるフォントキットです。通常のフォントとして印刷用途として商用利用も可能です。 ダウンロード版価格 5980円（税込み）
webfont-license
404 Page not found ページが見つかりませんでした。 URLが変わった・ページが消えたのかもしれません。 （たまにバッサリ捨てるので… もしそうだったらごめんなさい） トップページへ戻る
Intro Safari 10.0 から WOFF2 がサポートされており、これをもって IE 以外のメジャーブラウザではサポートが揃いつつある。 本サイトは WOFF 形式での Web Font を提供しているが、 WOFF2 形式では WOFF よりも 12% 程度圧縮率が高いため、本サイトでも WOFF2 に移行することとした。 フォーマット変更による効果について解説する。 WOFF File Format 2.0 本サイトでは、 Noto Sans CJK から必要なフォントのみを抽出したサブセットを、 WOFF 形式で読み込む構成を取っている。 Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io その後、必要な文字が増えフォントファイルを更新することにしたが、当時対応していなかった Safari が WOFF2 対応を始めているこ
WebFont Loader The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Font API provides. The WebFont Loader also lets you use multiple web-font providers. It was co-developed by Google and TypeKit. Contents Audience This document is intended for web developers; using the WebFont Loader requires some knowledge of JavaScript. A quick example The foll
Ruby on RailsのAsset Pipelineを使って、Webfontを利用する - hilott@memo
2013-06-03 Ruby on RailsのAsset Pipelineを使って、Webfontを利用する Ruby on Rails Web Font 最近は、アイコンがWebFontとしても配布されるケースが増えてきました。アイコンの色を変えたり伸縮させたりすることが、CSSだけですぐできるので便利です。 今回Ruby on RailsでWebFontを使用するにあたり、どのようにfontを設置すればいいのか調べたのでまとめます。 現在使用しているRailsのバージョンは3.2.12です。 WebFontを設置する 今回はWebFontを下記のパスに設置します。fontsディレクトリを作成して、その中にフォントファイルを入れておきます。 {RailsRoot}/app/assets/fonts/myfont.eot {RailsRoot}/app/assets/fonts/myf
1.はじめに 10月14日にリリースされたFireFox3.1 betaにおいてCSS3のWebFont(参考資料1)機能がネイティブで使えることが確認された。これでsafari、FireFox、IEという主要なブラウザすべてにおいてWebFont技術がサポートされたことになる。今年3月にはMicrosoftからeotの仕様も公開された(参考資料2)し、Operaの開発チームもWebFontに対して前向きなコメントを出している(参考資料3)。WebFont技術の更なる発展に期待したい。 2.Safari3.1におけるWebFont CSS3の書き方については参考資料4が詳しい。サンプルとスクリーンキャプチャを以下に示す。 サンプルページ：http://www28095u.sakura.ne.jp/webfont/webfonttest.html 3.FireFox3.1betaにおけるWe
Helvetica Font Family was designed by Max Miedinger, Linotype Design Studio and published by Linotype. Helvetica contains 36 styles and family package options. More about this family
FS Millbank Font Family was designed by Stuart De Rozario and published by Fontsmith. FS Millbank contains 17 styles and family package options. More about this family
This is a listing of all glyphs contained in the font, including OpenType variants that may only be accessible via OpenType-aware applications. Each basic character (“A”) is followed by Unicode variants of the same character (Á, Ä…), then OpenType variants (small caps, alternates, ligatures…). This way you can see all the variations on a single character in one place.
Flat Line Icons Webfont by Pete R. | The Pete Design
180+ high quality & minimal icons webfont for Bootstrap Framework Created by Pete R., Founder of Travelistly & BucketListly
その他参考サイト WebFonts として利用できるフリーの和文フォント フォントブログ 商用サイトでも無料で利用できる日本語のフリーフォント集 日本でも、大手のフォント会社がwebfontのサービスしてくれたら一気に普及すること間違いなし！だと思う。なのでタイプバンクがデコもじ、fonts.com両方で提供してるのはちょっと感動しました。 実際「デコもじ」のトライアルアカウントでテストサイトに日本語を適用してみた所、覚悟していたほど遅延は感じられず。 さすがに１サイトで数書体を同時使用するとやっぱり重くなるので現実的ではないにしろ、１書体ぐらいなら何とかなるんじゃないかという感触。 【2011/8/2追記】 新しいサービスが増えた模様。今度はフォントワークスです。でも少し高い・・・・ フォントワークス/イワタ/モトヤが使えるWebフォントサービス「フォントプラス」 – GIGAZINE.
This is a listing of all glyphs contained in the font, including OpenType variants that may only be accessible via OpenType-aware applications. Each basic character (“A”) is followed by Unicode variants of the same character (Á, Ä…), then OpenType variants (small caps, alternates, ligatures…). This way you can see all the variations on a single character in one place.
Aphrodite Slim Font Family was designed by Sabrina Mariela Lopez, Maximiliano R. Sproviero and published by Typesenses. Aphrodite Slim contains 9 styles. More about this family FREE 30-DAY TRIAL of Monotype Fonts to get over 150,000 fonts from more than 1,400 type foundries. Start free trial
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ - MOL
クレジットカードや決済システムなど、ショッピングサイト用のWebフォント素材 -Payment Webfont
Ligature Icon フォントセットの自作方法とWebFont - くらげだらけ
Brandon Grotesque Font | Webfont & Desktop | MyFonts
Electronでwebfont変換ツールを作ってみた話 - Qiita
amazon、各種クレカなど決済用のWEBフォント「payment-webfont」:phpspot開発日誌
これなら簡単！SVG対応、アイコンを組み合わせてWebフォントのセットを作成できる無料ツール -Webfont
FF Dingbats 2.0 Font | Webfont & Desktop | MyFonts
CSS3の@font-faceでWebfontを利用する。 - ぬぺら！
Octicons - GitHubで使われているWebFont
Webフォントがいつ読み込まれたかを判断したい場合は、WebFont Loaderを使おう
FF Franziska Font | Webfont & Desktop | MyFonts
Easily Identify Any Webfont With Type Sample · Typewolf
Sketchetik Font | Webfont & Desktop | MyFonts
Bootstrap向けのフラットなアイコンフォント・「Flat Line Icons Webfont」
Prefectly - 使おう！WebFontとCSSを使った日本地図 MOONGIFT
Proxima Nova Font | Webfont & Desktop | MyFonts
Gallery Font | Webfont & Desktop | MyFonts
150 outlined icons - PSD AI SVG Webfont - Freebiesbug
FF DIN Font | Webfont & Desktop | MyFonts
Blog Font | Webfont & Desktop | MyFonts
日本語ウェブフォントキット - Webfont・アプリ用フォント
WebFont の WOFF2 対応によるサイズ最適化 | blog.jxck.io
WebFont Loader - Google Font API - Google Code
FireFox3.1bとWebFont - Webと文字
Helvetica Font | Webfont & Desktop | MyFonts
FS Millbank Font | Webfont & Desktop | MyFonts
Korataki Font | Webfont & Desktop | MyFonts
webfontを日本語サイトで使う
Avenir Font | Webfont & Desktop | MyFonts
アフロディーテスリム - Webfont＆デスクトップフォント«MyFonts