初めてのGoogle Web Fonts


前に、web fontについて少し書いたんですが
Google の画面が少し変わってて、新しい版の説明記事が見つからなかったので
初心者向けにGoogle Web Fonts の簡単な適応方法を書こうと思います。
(2011年12月現在の画面です)

まずhtmlやcssを用意してから、順番にやっていきましょう。

■Google Web Fonts http://www.google.com/webfonts
まず、Google Web Fonts のサイトに行きます。

初めはこんな画面が出るので、Start choosing fonts の青いボタンを押しましょう。

web font がずらずらっと出るので、いろいろ画面を触って好きな文字を選びます。

左のFilters: という項目の「All categories▼」 のところでチェックを消して絞り込むと早いでしょうか。

Serif ・・・セリフ体・ゴシック体(太さがほぼ一定の書体)
Sans-Serif ・・・サンセリフ体・明朝体(はね や はらい等がある書体)
Display ・・・装飾文字
Handwriting ・・・手書きフォント

選んだら、Quick-use を押します。

ページが移動するので、下へ進むとソースコードを用意してくれているので
3. Add this code to your website: の枠内部分を、サイトのhead要素内へ貼り付けます。

次にその下の
4. Integrate the fonts into your CSS: の枠内cssをwebfontに変えたい自分のcss内へ追加します。

※1つだけ注意点。
この時、font-family: ‘●●’, ←の、シングルクォーテーション「’ ‘」があれば、ダブルクォーテーション「” “」に変更しないと有効にならない場合があります。

貼りつけたら、ブラウザで適応されているか確認してみましょう。
あらカンタン!楽しいね!

今回の方法はGoogleにリンクを貼って簡単にWeb Fontsを適応させる方法です。
Googleがサービスを変えちゃう可能性もあるので、使う場合はその辺は考慮してください。

サーバーにフォントファイルをアップロードして利用する方法は
こちらを参考サイトとしてリンクしておきますね↓
Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ – かちびと. net