つい昨日、ブロガーで仕事関連のWEBページを作りました。
そこで活用したのがWEBフォント。
覚えると凄く楽しいですよ。
WEB FONT
WEBフォンはPCに標準で装備されてないフォントです。普通は気に入ったフォントをPCに落として使ったり、サーバーに上げて使ったりするのでしょうが、Google様は素晴らしいです。
Google WebFontsに入って設定方法さえ分かれば、普通に使えてしまいます。
Google WebFontsの使い方
大して難しくもありませんが、まずGoogle Web FontsへGO↓https://www.google.com/fonts
好きなフォントを選ぶべし
いっぱいフォントがあるので選びましょう。そしたら、[→]印の所をクリック
フォントによっては太文字などの設定も出来ますので、使う場合はチェックして下へ。
上のタグと、下のタグはメモするか、ページを残しておきましょう。
導入方法
いよいよ導入しましょう。まず自分のサイトのHTML編集画面へ。
そしたら <head></head>内に<link href='http:/～>のタグを貼りましょう。
そして次が、フォントの指定です。
h1 {font-family: 'Milonga', cursive;}
例えばこんな感じでCSSに書いてあげると、指定した部分がWEBフォントに変わります。
上の指定だと、h1タグ部分が指定のフォントに変わります。
一応こんな感じです。
webフォント使って組んだページ
若干自分の店の宣伝ですがｗ 下のサイトがwebフォント使ってやってみたページです。Riffle Hatch -FAB- http://fab.u-hg.com/
ヘッダーロゴ等は画像のように見えて、実はWEBフォントでナカナカ良い感じです。
ではでは、参考になれば幸いです。
コメント
コメントを投稿