• かちびと.net

    Webフォントを上手くWebデザインに取り入れたサイトを収集しているギャラリーサイト・the WEB FONTS galleryのご紹介。ありそうでなかったWebデザインギャラリーですね。覚えておきたいです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Webフォントを上手くWebデザインに取り入れたサイトを収集しているギャラリーサイト・the WEB FONTS gallery

スポンサーリンク

ありそうでなかったWebデザインギャラリー
だったのでご紹介。Googleでも提供して
くれている、Webフォント。日本語では
なかなか難しいですが、英語圏ではかなり
一般化してきている印象です。そんな
Webフォントを上手く利用したWebサイト
を収集しているギャラリーです。

Know The Font: 3 Typography Inspiration Sitesという記事の中で紹介されていたWebデザインギャラリーです。ありそうで無かったですね、このギャラリー。良いインスピレーションが得られそうです。

the WEB FONTS gallery


Webフォントを取り入れたWebサイトのデザイン例です。まだ数は少ないですけど使い方は参考にしたいので覚えておきたいギャラリーですね。SEO的にも画像よりテキストのほうが良さそうですしね。


個別ページです。使用してるWebフォントも書いてくれています。親切ですねー

ブックマークレットで更に便利に


僕はサクッと調べられるブックマークレットを結構多用しています。こういうサイトの巡回の際に併用すると楽しくブラウジング出来るかもしれません。

Webフォントの使い方

以前簡単に書きましたがおさらい。

@font-face {
    font-family: 'webfont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

で、いつも通りfont-famiryに記述

font-family: 'webfont', Arial, sans-serif;

書き方は色々なんですけど一例として・・フォントを自分の管理するサーバーに置いた時の書き方の一つです。eotファイルはIEのためのものです(確か)。

余談ですが、GoogleのWebフォントのcssの中身はこんな感じ。

@media screen {
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: normal;
  src: local('Oswald '), local('Oswald'), url('http://themes.googleusercontent.com/static/fonts/oswald/v1/-g5pDUSRgvxvOl5u-a_WHw.woff') format('woff');
}
}

woffっていう形式は一応標準フォーマットとされてるフォントの拡張子です。もうwoffだけでもいいっぽいですね。あとで検証します。

WebフォントはGooglefontsquirrelを使うと良さそうですよ。Googleはコピペするだけなので特に楽です。

凄くどうでもいいですが、当サイトの404ページもWebフォントを使っています。ユーザービリティ無視ですけどw

貴方の知らない素敵なWebフォントが見つかるかもしれませんよ。こういうの使ってポスターみたいなものを作ってみたいですね。

the WEB FONTS gallery(via:jay-han)

URL :
TRB :

Comments & Trackbacks (2)

  1. jayhan

    Hi shiro, thanks for the link refer :D I like that bookmarklet.

    • シロ

      Hi JAYHAN. Don’t mention it ;)

      I’m with you. This bookmarklet is so useful!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services