CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました

CSS3のWebフォント機能を使うと、サーバー上にあるフォントファイルを使用するので、ユーザーのPCにインストールされていないフォントを表示できるようになり、ユーザーのフォント閲覧環境に依存しません。適用方法も簡単で、使用したいフォントファイルをサーバーにアップロードし、CSS3の@font-faceでフォントファイルを指定し読み込ませるだけで利用できます。これによりフォントによる自由な表現が可能になります。

海外と比較すると、まだまだ日本では普及しているとは言いがたいのが現状ですが、まずは今!Webフォントとは何か、そして現状どのような課題があるのかを知っておき、ちょっとしたところから、WebFontsを使ってみるとよいのではないでしょうか。

モリサワフォントもWEBフォントのサービスを始めるようなのでどのような形でどんな料金形態なのか気になるところではありますね。

あと日本語は文字数が多いので重くなるので、そこをどうクリアしていくかが日本でのWEBフォントが主流になるかのポイントになりますね。

Webフォントについてまとめられているサイト

Think IT / 連載:ここまでできる!CSS3 / 第4回 CSS3のWebフォントを使ってみよう

http://thinkit.co.jp/story/2011/08/18/2233

Webフォントの利用方法がとても親切に説明されています。また、「ここまでできる!CSS3」の中の1記事ですので、他のCSS3の注目機能についてもピックアップされており、かなりお勧めです。

フォントブログ / SafariやFirefoxも正式対応!CSS3のWebフォント(Webfonts)とは何か

http://blog.petitboys.com/archives/webfonts.html

Webフォントとは何か。また、Webフォントのメリットとデメリットが端的に書いてあります。Webフォントだけではなく、フォント全体の知識の補充にも役立つ素敵なブログです。

@IT/インストールせずに、好きなWeb Fontsを使おう

http://www.atmarkit.co.jp/fwcr/design/tool/webfonts01/01.html

WebFonts自体の説明と、簡単な使い方を紹介が紹介されています。また、Webフォントとフォントフォーマットのこれまでの歴史についても端的に知ることが出来ます。

monoe’s blog / Web フォントとハートブレイク・カフェ

http://blogs.msdn.com/b/osamum/archive/2011/06/06/web.aspx

Webフォントのフォーマットの種類についても詳しく書かれています。Webフォントの適用方法は、サンプルを交えて、分かりやすく説明しています。

最前線 – フィクション・コミック・Webエンターテイメント / 『最前線』の“ウェブフォント機能”を公開します!

http://sai-zen-sen.jp/editors/blog/day/post-161.html

美しいWebフォントの魅力を解説!、、良いことずくめのように思えるWebフォントですが、実はいろいろと問題があり、現在のところ一般に普及しているとは言い難い状況が説明されています。実装のタイミングを計ろう!!

かちびと. net

http://kachibito.net/web-design/font-face-tips.html

@font-face 関連の情報いろいろ。Webフォントの使い方が分かったら、次は情報収集用に良いサイトです。Webフォントに役立ついろいろなリンク集もあります。クロスブラウザ対応の@font-faceの実装Tipsや、Webフォントとして利用できるフリーの和文フォントの紹介のあるサイトへのリンクもあります。

Web Font Awards

http://www.webfontawards.com/

Webフォントを使ったサイトのデザインを競うコンテストとして、昨年初めて開催された「Web Font Awards」が今年も開催されています。このWeb Font Awardsのサイトでは、Frutigerというフォントが全面に使われています。

Web Designing ウェブフォント デザインアワード2011

http://pr.fontplus.jp/

ついに日本初のWebフォントを使ったサイトのコンテストが開催されることになりました。その「Web Designing ウェブフォント デザインアワード2011」のオフィシャルサイトです。今後のエントリー作品、そして受賞サイトに注目したい。このサイト自体にも、テキストの部分の表現にはほとんど画像は使われていません。日本語のWebフォントを使ったタイポが印象的です。

次回は実際にWEBfontを使われているサイトをいくつか紹介したいとおもいます。

【関連記事】
CSS3のWebフォントを使用して作られたWebサイトあつめました

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事