Web フォントを利用して、Web サイトで個性的な文字を使う

1. 海外のブログで、シンプルなデザインのサイトは、Blogger を使っていることが多い

海外のブログで、ファッション系のサイトを見ていると、Blogger である場合が多い。写真のサイズは大きく、綺麗な画像が載せられている。サイト全体はシンプルで、コンテンツに目が行くように配慮されている。

日本では、 Ameba を利用する人が結構いるようだが、掲載されている写真を見ると、なんだかなぁ…と。ただし、自分が知る限り、水原希子の画像は綺麗で、道端アンジェリカ の写真はでかい。

 

2. Blogger で使えるフォント

ところで、Forget*me*not... を眺めていたら、記事のタイトルの文字が、綺麗な細身のフォントであることに気がついた。Firebug でソースを見たら、使われているフォントは、

Josefin Slab フォント via kwout

Josefin Slab

こんなフォントをウェブで使えたかな？と思い調べてみると、

• Blogger で使用できるフォント一覧 - クリボウの Blogger Tips

の中に Josefin Slab があった。

 

3. Web フォントにより、サイトで使えるフォントの幅が広がる

なぜこのようなフォントを使えるのか、参照先を読んでみると、

A couple of months back we introduced Web Fonts to Blogger in Draft. Today we’re excited to not only launch Web Fonts to ALL Blogger users, but also announce we’ve added an additional 35 fonts to the mix, for a grand total of 77 fonts! …

Web Fonts, brought to you by our good friends at Google Fonts, let you spice up and further personalize your blog. J

（Blogger Buzz: The Quick Brown Fox より）

Web フォント と言う技術が使われているようだ。

今、はやりのWeb Fontとは？：Webトレンド：ITmedia オルタナティブ・ブログ によると、

ここ1、2年、注目を集めているのがWeb Font。これは、興奮する話です。フォントを全てウェブ上に置いてしまって、誰でも同じようにサイトが見れるようにしようというアイデア。 有名どころで言えば、fonts.com Web Font , Typekit, Font Deck, そして最近Googleが開始したGoogle web fontsなどがあります。

日本語の場合、欧文フォントのように豊富ではないけれど、日本語 ”webフォント” で検索すると 幾つかサービスが見つかる。

日本語WEBフォントサービス（デコもじ＆フォントプラス）を比較してみた。 | ラズル株式会社スタッフブログ によると、

英語のWEBフォントサービスが世に現れてから、ブログやニュースサイト等を中心に爆発的に広がりを見せましたが
日本語フォントのサービスはまだまだ始まったばかりで、私が知っているのは以下２つです。
「デコもじ」
「フォントプラス」

 

4. Google Web Fonts を使ってみる

上記で紹介されていた Web フォントの中で Google Web Fonts を試しに使ってみる。

Google Web Fonts を開いたら、Start choosing fonst ボタンを押す。

Google Web Fonts via kwout

左側にある Search ボックスに、フォント名 `Josefin Slab’ を入力して、フォントを絞り込む。

Google Web Fonts via kwout

フォントの下にある Quick-use リンクをクリックすると、使いたいサイトに埋め込むコードと、フォントを適用したい要素に対する CSS が表示される。

Google Web Fonts via kwout

 

5. Tumblr で Web フォントを使う

例えば、Tumblr のタイトルのフォントを、上記で取得したものに変更したいとする。

Tumblr を表示させ、customize ボタンを押す。

メニューより、Theme において、Use custom HTML ボタンを押す。

表示された HTML 中における head 要素の中に、Google Web Fonts で取得した link 要素を貼り付ける。

次に、メニューより、Advanced > add custom CSS に、Google Web Fonts で取得した CSS をタイトルに対して適用するように記述する。自分が使っているテーマでは、以下のようにして CSS を適用した。

#header h1{
font-family: 'Josefin Slab', serif;
}

これで、タイトルのフォントが 'Josefin Slab' となった。

Google Web Fonts を使用する前。

my brain forget soon via kwout

使用後。

my brain forget soon via kwout

Google Web Fonts で、日本語フォントも使えるようになるといいなぁ。そうすれば、デザインのために文字を画像として表示する、なんてことをしなくて済む。