Google Web Fonts

Fonts-Ennobled Pet

Fonts-CameoAntique

Fonts-Frazzle

Fonts-Peeps

さて、これをご覧いただいてる皆様にお尋ねします。
↑ここに書かれてある文字……どんなふうに見えますか?

WebFonts04.gif私が今使っているパソコンでは①のように見えているのですが、同様に見えている方はいらっしゃいますでしょうか?
多分ほとんどの方が②のように見えていると思います。
もしも全てのフォントが表示されていて①のように見えている方がいらっしゃるなら、私、お友達になりたいわ~(#^.^#)
かなりのフォントフェチのお方かと……。

あ…話が横道にそれてしまいそうですので、本線に戻します。

HTMLでいろんなフォントを指定したとしても、見ている側のパソコンにそのフォントがインストールされていなければ、指定したフォントを表示することができません。

例えば…この例のように、私のパソコンではこれらのフォントが入っているので自分の見ているブラウザでは表示されるから、このフォントで書いた文字を皆さんにも見ていただきたいと思って「<span style="font-family: CameoAntique">Fonts-CameoAntique</span>」←のように指定して使ったとしても、見てる側のパソコンにこれらのフォントが入っていなければ、ブラウザのデフォルトのフォントで表示されてしまいます。
ですので、②のように見えてしまうというわけです。

前置きが長くなりましたが、本題です。

こんなときに簡単で便利なのが「Google Web Fonts」。


Web Fonts-IM Fell English

Web Fonts-Reenie Beanie

Web Fonts-Tangerine

↑これはどんなふうに見えていますか?
WebFonts01.gif←きっとこんなふうに見えてるのではないか…と思うんですが、いかがでしょうか?
(ひょっとしたらIEのバージョンによっては見られないかも? IE8で確認すると表示されず、しかしIE9で確認すると表示されています。)

これは「Google Web Fonts」を使っているので、それぞれのパソコンに依ることなく表示されるというわけです。
(ブラウザによっては表示されなさそう……(T_T))

以下導入手順です。

WebFonts02.gif
Google Web Fonts」の「Start choosing fonts」または「Choose」をクリックして始めます。

WebFonts03.jpg●「Quick-use」をクリックするとそのフォントだけが表示されます。
●複数のフォントを使う場合は「Add to collection」をクリックしていき、使いたいフォントを決めていきます。

WebFonts03.jpg複数選択した場合、やっぱりや~めた!というときは「Remove from Collection」をクリックすると選択が解除されます。

下部の「Choose」はこの画像のような「選択画面」を表示。
「Review」は選択したフォントがサンプル表示されます。
「Use」を選択するとこれらのフォントが使えるようになるタグが表示されます。

WebFonts06.jpg「Use」をクリックした時の画面です。

「<link href='http://fonts.googleapis.com/css?family=Princess+Sofia|Butterfly+ Kids|Parisienne|Macondo+Swash+Caps' rel='stylesheet' type='text/css'>」をHTMLのhead内に貼り付けます。
(赤字部分は選択したフォント名です。)

その下の「font-family: 'Princess Sofia', cursive;」などをCSSに追加したり、記事を書く際にフォントの指定をしてやる場合に使います。

例えば

Hundreds of free, open-source fonts optimized for the web

と表示したい場合は、

<div style="font-family: 'Reenie Beanie', cursive; font-size: 20px;">Hundreds of free, open-source fonts optimized for the web</div>

という感じで表示させます。

残念ながら日本語は使えませんが、アルファベットを使う場合、Google Web Fontsを使うと、おしゃれなアルファベットがここのパソコン環境に依ることなく表示できるのがいいですね♪


関連記事

0 Comments

Post a comment