みなさんこんにちは！あっという間に3月ですね。。。
今年ももう3ヶ月過ぎたことに驚きを隠せない開発部ヤマダです。
さて、本日はGoogleのWebフォントを使用する方法をを紹介します！
（若干いまさら感が否めないですが。。。）
“Web Font とは”
普段Webサイトを製作していると、見出しやタイトルでサイトのイメージに合ったフォントを使いたいときってありますよね。
私も今まではIllustratorで画像を作成して、それをそのまま要素で配置していたのですが、CSSでフォントを指定することで好きなフォントを表現することが可能です。
CSSの記述で
body{
font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
}
の様に記述してサイトのフォントを指定します。
通常ブラウザで表示できるフォントはユーザーのパソコンにインストールされたフォントだけですが、これを、Web上に公開されているフォントを取り込んで表示させるのがWeb Font です。
Googleから取り込む
今回はGoogleが公開しているGoogle Fontsを利用して、
さまざまなフォントを表示する方法を紹介します。手順としてはいたって簡単な、
- head内でCSSを読み込む
- CSSで任意の要素にWebフォントを指定する
という2点だけです。
1.head内でCSSを読み込む
Google Fontsから好みのフォントを選び、下記のボタンを押下し詳細ページへ遷移する。
3. Add this code to your website: に書かれている要素を、
自身のサイトの
内に記述する。
2.CSSで任意の要素にWebフォントを指定する
フォントの詳細ページに記載されている、
4. Integrate the fonts into your CSS: を自身のCSS内に記述する。
これで、先ほど選んだフォントがWebサイト内で表示されています。
サイトのイメージに合った文字になりましたね！
Google Fontsの各フォントの詳細ページを見ると、ページの先頭部分に計器のような画像があり、
文字の太さ(font-weight:400)のチェックボックスを変更すると計器の針が動きます。
そう、これは Web Fontの読み込みにかかる時間を表し、フォントの種類と大きさによっては読み込みに若干時間がかかるんです。。。
Google Fontsの注意書きにもありますが、サイト内で使うWebフォントはせいぜい1つに決めておいたほうが良いのかもしれません。
使いドコロを意識して、サイトのコンセプトにあった文字を選定しましょう！
以上、開発部ヤマダでした！
