Googleフォント を使うと、Webページに珍しい文字(オシャレな文字)を表示してアクセントを加えることができます。
使いどころとしては、
- ロゴの代替
- ブランド名(サイト名)
- メニュー、見出し
- 等々
になるのかなぁと思っています。
CSS でフォントを読み込むので、クライアントに存在するか(フォントがインストールされているか)を気にしなくて良い点がメリットだと思います。
これから、Googleフォントの使用方法を書いていきます。
使用手順
流れとしては、こんな感じになるのかと思います。
- Googleフォントのページ で使いたいものを見つける
- フォント の CSS を HTMLで読み込む
- HTML の要素にフォントを指定する
使用例
Anton というフォントを使いたいとしたら(手順1)、
フォントの CSS を、
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
といった感じで読み込みます(手順2)。
それから、
#brand { font-family: 'Anton', sans-serif; ・・・省略・・・ }
といった感じで、HTMLの要素にフォントを指定します(手順3)。
上のタグとスタイルは、フォントのページに記載されています。
コード例
上のコードを含む、完全な HTML を書いてみました。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Googleフォントのサンプル</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> <style> #brand { font-family: 'Anton', sans-serif; font-size: 40px; color: #248; } </style> </head> <body> <div id="brand">Hello World</div> </body> </html>
ブラウザで開くと、下のような文字が表示されます。