Webフォントは悪なのか？ ブログの表示速度をTestMySiteで4秒までに改善したTips : ATOMS by Loftwork
テクニカル・ディレクターの安藤です。 今年のCMS大阪夏祭りからというもの、個人的にCraftCMSがアツくなっています。 先月CraftCMSを使い、自分のブログをリニューアルしました。 編集画面はこんな感じ。 ほぼまっさらな状態からカスタムフィールドで編集画面をカスタマイズしていくような作りなので、デフォルトの機能を殺すような無駄がありません。 カスタムフィールド職人には嬉しいCMSです。 おかげで快適に記事を執筆しているのですが、１つ問題がありました。 画像は都度pngoutなどで圧縮してからアップしているのに、表示がとても遅いんです。 Test My Siteでは「12秒」、GTMetrixでは「F/E」という真っ赤な評価。 これはいかん！ということで主催という特権を使い、『Japan CraftCMS Meetup』で速度改善のワークを行いました。 とはいえ今回はCraftCMS
タイポグラフィーデザインの参考になるギャラリーやデザインプロジェクト - NxWorld
欧文フォントを使ったものが多めですが、参考になるタイポグラフィーデザインが多数まとめられているギャラリーやwebフォントを利用して様々なデザインを表現しているプロジェクトなど、タイポグラフィーやフォントに関連するようなものを幾つかまとめてみました。 ちょっと特徴的なフォントがどのようにしてデザインに上手く取り入れられているかとか複数のフォントを用いた場合の組み合わせ方など勉強になる部分も沢山ありますが、とにかくフォント好きな人は見てて楽しいものが多数あると思います :) Typewolf フォントに関する有益な情報が多数まとめられているブログとしてご存知の方も多いと思います。 参考デザインのギャラリーでは使用されているフォント名だけでなくそれらをダウンロードできるページヘのリンクなども用意されており、他にもフォントに関するブログエントリーや便利なリソースなどの情報もまとめられています。 F
アイコン関連ブックマーク激増の2012年を振り返って、今年見てきたアイコン系リソース全部紹介！ | バンクーバーのうぇぶ屋
今年はアイコンWEBフォント系のサイトが本当に増えましたねー。知らずの間に僕のブックマーク内のアイコンカテゴリも、もはや収集がつかない勢いで増えている事に気づいて、さぁちょっと個人的に整理が必要だと思いましたので、今日はこれまでも利用／参考にさせてもらってきたアイコンリソースサイトと、今年僕が知ったアイコンWEBフォントを紹介しているサイト交えて、完全にオンリーアイコンネタで今日は記事を書かせて頂ければと思います！ 半分以上は僕の備忘録になりますが、こういったリソース関連は今年も来年もやっぱりできる限り周りのWEB屋同士でも共有させて頂ければと思っています！念のためライセンスは一個一個のアイコンに対して表記してあったりパッケージで表記してあったりまちまちなので、ご自身でご確認頂けますと幸いです！っていうか、まとめ出してちょっと公開したのですが、とんでも無い量になってしまってホントすいません
Free beautiful web icons - Vector social media icons
Beautiful Free icons In png, svg, vector, CSS sprite and webfont formats... Vector and webfont Social Media icons for free! 444 png black and white web icons + 72 color and vector Social Media icons for free ! Easy to integrate in your website or your mobile apps by using CSS sprite and/or webfont. Download Full pack Color + Black and White Normal and @2x PNG, SVG, PDF, AI and EPS CSS sprite Web f
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
35+ awesome and free @font-face kits
With the right fonts, we can do anything, and create anything. Fonts help portray a mood or emotion. Your font choice can make or break your designs, so you must careful in choosing the right one. Typography matters not just because it looks good, but because what's being said is extremely important. Typography in web design is becoming huge. We can now embed and show all sorts of fonts on our web
Google Web Fonts が IE で適切に読み込まれない
Google Web Fonts のウェブフォントには IE 8 以下でちょっとしたバグがある。このサイトでもずっと放置してたのをようやく直しました… <head> ... <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"> ... </head> たとえば上記のように書けば、Open Sans のウェイト 400 (ノーマル) と 700 (ボールド)、そしてそれぞれのイタリックの計 4 書体が読み込まれる。あとは CSS でふつうに h1 { font-family: "Open Sans", sans-serif; font-weight: bold; } みたいな感じで指定が可能。 Fig 1: Open Sans on
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
最近話題になっていたこちらのサイトがとても便利です。 Fontello – http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭文字を取るとか、abc～とかにするとかですかね。 文字列の指定が終わったら、フォントファイルのダウンロードを行います。 サイト右上にある「Download webfont(n)」をクリックしましょう。 「fontello-xxxxxxxx.zip」がダウンロードされます。 解凍して中身を見てみましょう。 fontello －cssフォルダ －icons.css －icons-codes.css －icons-ie7.css －
Beautiful web type : 実例サンプルがすばらしいWebフォント推奨サイト
フリーで利用できるWebフォントのサイト『Google web fonts directory』には非常に多くのフォントが登録されており品質的にもピンからキリまでいろいろある中で、価値あるフォントを実例に即しておすすめしてくれるサイトがこちらのBeautiful web typeというサイト。 秀逸なのは、単におすすめフォントのタイプフェイスをスクリーンショットで見せるというようなものとは次元が異なり、そのフォントが一番映えるようなサンプルを作って見せるというもの。 文字組み・字詰めから配色に至るまで、そのフォントに合うように完璧にデザインされているところがすばらしく、フリーフォントを使ってカッコよく見せるちょっとしたお手本のようなサイトです。
Font Awesome Font Free by Dave Gandy » Font Squirrel
SIL Open Font License v1.10 This license can also be found at this permalink: https://www.fontsquirrel.com/license/font-awesome This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL —————————————————————————————- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 —————————————————
Webフォントを使ってみよう！@font-face 関連の情報いろいろ
Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります。 クロスブラウザでWebフォントを利用するには /* IE */ @font-face { font-family: abc; src: url(abc.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: abc; src: url(abc.ttf) format("truetype"); }としてあげるといいみたい。IE
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
シンプルで汎用的なアイコンを扱うPICTOSがTypekitライクなWebフォントサービスを始めたみたいです
日曜なので軽めのネタでも。つい最近 アイコンのWebフォントに関するリソース を書いたばかりで、タイムリーだった のでご紹介。PICTOSっていう、様々な サイトで用いられている汎用的なアイコン があるんですが、このアイコンの新た なサービスの話です。 PICTOSはロイヤリティフリーのアイコン集で、skype、DropboxやAdobe、dribbbleなどなど有名なサイトでも使用されている人気のアイコンです。 このアイコンはフォントも用意されているのですが、このフォントをTypekitライクにWebフォントとして使えるサービスを開始したみたいです。いろいろ言ってる事が分からない、という方は参考文献をご覧下さい。 「Pictos」UIデザインで使えるロイヤリティフリーのアイコン集TypeKit で広がる Web デザインの可能性今回のサービスはフォントのサブセット化+ホスティング、という
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーが持っていたい、Googleフォントおすすめ12選
FontPro: Free Fonts and Web Fonts
IcoMoon App
Fontello - icon fonts generator
Font Awesome – 商用無料のアイコン用のWebフォント – creamu