[Google API]グーグルのWEBフォントの使い方。

This entry was posted on
September 04 , 2014, Category is

今更ですが良く質問を受けるので記事にします。HTML5やCSS3の普及でWEBフォントも支流になってきた今日この頃。タイトル通りGoogle Fontsを使う機会も増えると思いますので使い方をご紹介。作業自体は簡単で主に2STEPで終了します。

  • Googleから希望のWeb Fontを呼び出しheaderに記入
  • スタイルシートに呼び出したGoogle Fontを指定する。

具体的にはまず Google Fonts に行って希望のfontを選ぶ。左サイドバーからセリフ体とかサンセリフ体とかを選択、メインカラム上部のPreview Text:から、表示させたいテキストを入力してプレビューする事も可能です。今回はMarck Scriptを選びました。

少し分かりづらいのですが、各フォントの右下にボタンがあるので、それを押すとscriptタグが発行されます。発行された以下コードをheader内に記載します。

<script language="javascript" type="text/javascript" src="js/modernizr.custom.70736.js"></script>

これでMarck Scriptが使えるようになっているので、表示させたい要素にMarck Scriptを指定してあげればOK.今回はh1要素にMarck Scriptを使えるようにしたいのでCSSに以下のように書く。

h1 {font-family: 'Marck Script', cursive;}

かっこいいんだけどサイトの読み込みスピードが重くなるので沢山のfontを呼び込むのはユーザビリティ上ナンセンスですが(笑)クリエイティブ志向のWEBサイトには使えそうですね。

皆様の応援が次の記事を書く原動力です