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を使うと、おしゃれなアルファベットがここのパソコン環境に依ることなく表示できるのがいいですね♪


関連記事

コメントの投稿

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ