記事の詳細
WEBをもっとカッコ良く!わずか4ステップでGoogle Web Fontを使う方法!
Webフォントってご存知ですか?
スタイルシート(CSS)でフォントを指定するだけで、ユーザーのパソコンにインストールされていないフォントでも表示することができるようになるというスグレモノです。
フォントがインストールされていなくて、制作者が意図した見え方になっていないというケースがこれまで良くありましたが、WEBフォントを使えばこれらの問題も解決できます。
今回はWEBフォントをものすごく簡単に使う方法を紹介します!
今回のブログの見出しはコチラです!
とにかく簡単に使えるGoogle Web Font
Google Web Fontを今回は使います。
これはGoogleが提供してくれているWEBフォントでして、とても簡単に使用することができます。
フォントの数はなんと!
約700種類ものフォントが提供されています!!
わずか4ステップで使えます!さっそく使ってみましょう!
使いたいと思ったフォントが見つかったら、下図の赤枠のアイコン「Quick-use」を押します。
Step1:フォントの太さを選びます
使用するフォントの太さをチェックボックスで選択します(複数選択可)
Step2:サブセットを選びます
サブセットの種類があるものに関しては、こちらも選択します(複数選択可)
Step3:CSSをコピー&ペーストします
@importのタブをクリックしてください。
そしてCSSファイルに以下のように書きます。
1 2 3 4 5 |
@import url(http://fonts.googleapis.com/css?family=Oswald:300); body { font-family: 'Oswald', sans-serif; } |
CSSのファイル名はstyle.cssとして、Step4のHTMLファイルと同じディレクトリに置いておきます。
Step4:HTMLファイルでCSSを読み込みます
1 |
<link rel="stylesheet" type="text/css" href="style.css" media="all"> |
これでHTMLファイルを再読み込みすると・・、変わりましたか??
HTMLファイル内のフォントが指定したフォントに変わったと思います。
WEBフォントをドンドン活用しましょう!
Google Webフォントなら今回説明したように本当に簡単に誰でも利用することができます。
英字フォントは種類も豊富で無料版が多く提供されているのですが、和文フォントはちゃんとしたものは有料ばかりなのが残念なところです。。。
今後さらにWEBフォントは活躍の場が増えそうです!
簡単に使えるので試してみましょう!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。