オノマトペラボ。オノマトペラボはオノマトペの力でコミュニケーション上の「むずむず」を「しっくり」に変えることを目指すプロジェクト。オノマトペというテーマからして文字好きにはグッときてしまう。やっぱりいろいろなフォントが訪問の度に変わるのも、ウェブフォントを有効に活用している感じでダイスキ。今のところ目立ったウェブフォントを有効に活かしているサイトが少ない中で、頭一つ抜けているデザイン。
http://onomatopelabo.jp/

無料でダウンロードできるWebアイコンフォントFont Awesomeの使い方〜サイズ変更とボタン化

2014年8月16日 flopdesign コメントする

実は日本でよく使われているウェブフォントはアイコンフォントです。

Font Awesome はサイト上でよく使われるアイコンを
ウェブフォントにしたものです。ちょっとした場面で役立ちます。

サイズや色など CSS で様々に調整して利用することができます。
http://fortawesome.github.io/Font-Awesome/

Font Awesome のトップページの『Download』よりダウンロード。

zipファイルを解凍し、サーバーにCSSフォルダ内の
「font-awesome.css」か「font-awesome.min.css」のどちらかと
fontフォルダのフォントをアップロード

難しすぎてよくわからないという人はワードプレスの場合
プラグインもありますのでインストールするのもあります。

例えば<i class=”icon-pencil”></i>やショートコードで鉛筆を表示したサンプル

[icon name=icon-pencil]

センター配置にしつつ、160pxにして、行の高さを160pxにして、リンクを貼ってみたサンプル。

[icon name=icon-pencil]

Bootstrapのボタンの中に入れてみたサンプル
[icon name=icon-pencil] 鉛筆です

ちなみにBootstrapのボタンおよびアイコン付きのボタンが簡単に作れるサイト
http://www.thiagocanudo.com.br/bootsbutton/

グッドフォントウェブ, ブログ

B&B(bookandbeer) A1明朝（モリサワ）ウェブフォント

2014年8月10日 flopdesign コメントする

明朝体を使ったサイトは、まだ少ないのですが
Windows8.1に游明朝が搭載されたことから
今後は増えていくことが予想されます。

B&B(bookandbeer)のサイトはA1明朝（モリサワ）を使用しています。
実はA1明朝は通常の明朝体レギュラーより、少し太めなんですよね。
それが、ウェブフォントとしてはプラスに作用しています。

明朝体というと伝統的な方向性にとらわれてしまうのけど
こういった、すごくモダンで革新的な表現にも合いますね。

http://bookandbeer.com/

ウェブフォント, ブログ, ワードプレス

日本語ウェブフォントって何？

2014年8月9日 flopdesign コメントする

望みの日本語フォントで表示できるウェブフォント

今まではフォントを指定しても、見ている人の環境に同じフォントがインストールされていなければ、表示されませんでした。

そのため、好みのフォントをPNGやJPEGなどの画像に変えて表示していました。しかしそれには多くのデメリットがあります。

1.検索エンジンが読めないのでSEO的に不利

2.訪問者が文字サイズを変更・検索・文字をコピーができない

3.ホームページの修正・更新の作業量が増える

4.翻訳・読み上げソフトが使えない

5.サイト全体のイメージを決める本文には使えない

しかしウェブフォントを使えば、見ている人のパソコンに同じフォントがインストールされていなくても、指定したフォントで表示できます。
ただ海外ではすでに多くのサイトが取り入れていますが、日本ではまだ殆ど使われていません。それにはいくつか理由があります。まず日本語ファント自体の読み込みが重い（これは改善されつつあります）。有料で使用できるフォントがあるが使用料やアクセス数制限などの問題から、個人サイトでは気軽に使えない。ウェブフォントファンでは、こういった問題も解決していけるように、いろいろな話題を取り上げていきます。

ウェブフォントのファイル形式

TrueType（.ttf）

アップルコンピュータとマイクロソフトが共同開発した、パソコン環境で一般的なフォーマット。

OpenType(.otf）

TrueTypeの後継フォントとしてアドビ、マイクロソフトが共同で開発した一般的なフォントフォーマット。

EOT(.eot)

Microsoft開発のウェブフォント用フォントフォーマット。IEのみ対応。

WOFF(.woff)

軽量なウェブフォント用に開発されたフォーマット。モダンブラウザーが対応。

SVG(.svg)

以下は各ブラウザでの対応状況

	TrueType （.ttf）	OpenType （.otf）	EOT （.eot）	WOFF （.woff）	SVG Font （.svg）
IE 4～	×	×	○	×	×
IE 9～	×	×	○	○	×
Chrome 4～	○	○	×	×	○
Chrome 6～	○	○	×	○	○
Safari 3.1～	○	○	×	×	○
FireFox 3.5～	○	○	×	×	×
FireFox 3.6～	○	○	×	○	×
Opera 10～	○	○	×	×	○
Opera 11.10～	○	○	×	○	○
iOS4.0～	×	×	×	×	○
iOS4.2～	○	○	×	×	○
Android 2.2～	○	○	×	×	×