Google FontsをCSSに適用してWEBページに特殊なフォントを表示



最近サイトでよく使われてるGoogle Fontsを使用し、
CSSに適用してみます。

1.Google Fontsのページより使いたいフォントを選ぶ

Google Fontsより、使用するフォントを選択(「Add to Collection」)し、
選択後にページ下部に表示される「Use」をクリックします。
ページに表示されている手順(CSSファイルの読込とfont-family)の指定を行います。

2.読込むCSSファイルとCSSの記述例

font-familyに「1.」にて選択したフォントを指定します。

<link href='http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'>
<style>
body{
	font-family: 'Share Tech', sans-serif;
	padding: 0;
	margin: 0;
}
</style>

3.HTMLの記述例

以下は任意です。

<div class="clWrap">
    <h1>本ページ全体にGoogle Fontsを使用してます。</h1>
    
    <p>「BLINDER HIDDEN(ブラインダーヒドゥン)」は、WEBエンジニアの隠れたファインプレーを紹介するWEBサイトです。 発信情報は、JavaScript、jQuery、Ajax、PHP、Android、java、WordPress、Facebook、HTML5、HTML、CSS、CSS3、MySQL、Linux、コマンド、SEO、スマートフォン、見えないデザイン、アイデア 等</p>

</div><!--/clWrap-->

Google Fontsを使用したデモ

ソース元:Google Fonts

どうやら英数文字にしか適用されてない様ですが、
日本語用のフォントもあると良いですがどうなんでしょうかね。