2014年4月19日土曜日

グーグルのWEBフォント

つい昨日、ブロガーで仕事関連のWEBページを作りました。
そこで活用したのがWEBフォント。
覚えると凄く楽しいですよ。

WEB FONT

WEBフォンはPCに標準で装備されてないフォントです。
普通は気に入ったフォントをPCに落として使ったり、サーバーに上げて使ったりするのでしょうが、Google様は素晴らしいです。
Google WebFontsに入って設定方法さえ分かれば、普通に使えてしまいます。

Google WebFontsの使い方

大して難しくもありませんが、まずGoogle Web FontsへGO↓
https://www.google.com/fonts

好きなフォントを選ぶべし

いっぱいフォントがあるので選びましょう。
そしたら、[→]印の所をクリック
Google Web Fonts 使い方1
 そしたらこんなページが出ます。

Google Web Fonts 使い方2
どれを使うかの設定ですね。
フォントによっては太文字などの設定も出来ますので、使う場合はチェックして下へ。

Google Web Fonts 使い方3
ここ重要ですよ。
上のタグと、下のタグはメモするか、ページを残しておきましょう。

導入方法

いよいよ導入しましょう。
まず自分のサイトのHTML編集画面へ。
そしたら <head></head>内に<link href='http:/~>のタグを貼りましょう。

Google Web Fonts 使い方4
 僕が新しく立ち上げたサイトは3つほど導入しています。

そして次が、フォントの指定です。

h1 {font-family: 'Milonga', cursive;}

例えばこんな感じでCSSに書いてあげると、指定した部分がWEBフォントに変わります。
 上の指定だと、h1タグ部分が指定のフォントに変わります。

一応こんな感じです。

webフォント使って組んだページ

若干自分の店の宣伝ですがw 下のサイトがwebフォント使ってやってみたページです。
Riffle Hatch -FAB-  http://fab.u-hg.com/
ヘッダーロゴ等は画像のように見えて、実はWEBフォントでナカナカ良い感じです。

ではでは、参考になれば幸いです。

スポンサーリンク

0 コメント:

コメントを投稿