G.F.

Google Fontsのフォントをだらだら眺めることの出来るページ、G.F.を作った。ページを開いて少し待つと最初のフォントが表示される。何もないところをクリックで次のフォントが表示されるので、ひたすらクリック！　Shiftを押しながらだとひとつ前のフォントに戻れるので、あっと思っても大丈夫。

カラースキームは適当に24パターン作ってランダムに使用している。全体的に落ち着いたトーンのものにした。フォントによっては見づらくなるのは愛嬌。色は右上の丸に?をクリックすると出てくるヘルプ・メニューに操作法とともにrgb()で表示しておいた。

Chrome 29が一番速く普通に表示される。Firefox 24ではFOUTの関係上フォントが表示されてから適用されるまでに間がある。Internet Explorer 10では描画されないWebフォントのパースとレンダリングが裏で行われてしまうようで、最初のフォントが表示されるまでがすごく重く時間がかかる。なおYQLが挙動不審で、Google Fonts APIが落ちていないのにも関わらず結果が空になることが頻発する。どうにかしたいけど、YQL使う以上どうにもならなそう。

切り替えのアニメーションはjQueryでやっても良かったけど、transitionプロパティーでできる単純なスライド効果にしたのでCSSでやった。あらかじめ(top|left)プロパティーを使って画面外にスライドして追い出すようなクラスを用意しておいて、付けたり外したりしているだけ。

スクロールバーは隠しているが、見えないだけでスクロールできる。ので下と右の画面外にスライドさせたあとはドラッグやオートスクロール等で隠れているのが見れる。どうにかするの面倒臭い気がするので、なにかうまい方法思いつくまではこのまま。

Google Fontsも今や600を超えており、単なる比較や検索では思ったようなものを見つけるのが難しくなっている。様々な比較方法が用意されているが、それらを使うところまで絞ることが大変。結果、どっかで使われているのを見たとか人気のある安定したフォントばかりを使いがち。それでもまだ新しく登録されたフォントは使われることがあるけど、古くてあまり人気が出なかったのは誰にも見向きされず埋もれていってしまう。それらも含めてランダムにだらだら眺めさせれば、直観的な新しい発見があるのではないかなーと思って作った。